複数のページ(data-role = "page")で構成される1つのテンプレートがあります。
また、スクリプトで生成する必要のあるデータもあります。生成されるデータは、スクリプトが起動するページによって異なります。
ページの変更に関連するイベントで、ページIDまたはそれに関する別の一意の情報を取得するにはどうすればよいですか?
pageshowイベントを試しましたが、どこのページIDを取得できません。
ありがとう。
複数のページ(data-role = "page")で構成される1つのテンプレートがあります。
また、スクリプトで生成する必要のあるデータもあります。生成されるデータは、スクリプトが起動するページによって異なります。
ページの変更に関連するイベントで、ページIDまたはそれに関する別の一意の情報を取得するにはどうすればよいですか?
pageshowイベントを試しましたが、どこのページIDを取得できません。
ありがとう。
これが実際の例です:http://jsfiddle.net/Gajotres/ecXuk/
同様の質問に関する他の記事もご覧ください:https ://stackoverflow.com/a/14010308/1848600
コード例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<a href="#index" class="ui-btn-left">Back</a>
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
そしてjsの部分:
$('#index').live('pagebeforeshow',function(e,data){
alert('Index Page');
});
$("#second").live('pagebeforeshow', function () {
alert('Second Page');
});