jQuery Mobile Multi-Page-method指定捕获事件
html:sub1.html,sub2.html,sub3.html + js:each_page.js
sub1.html
<!DOCTYPE HTML>
<HTML><head>
<link rel="stylesheet" href="../../jquery-mobile/jquery.mobile-1.2.0.min.css" />
<script src="../../jquery-mobile/jquery-1.8.2.min.js" ></script>
<script src="each_page.js" ></script>
<script>
function init(){
now = new Date();
$('#p1_content').html("John's event..."+ now.getMinutes() +":"+ now.getSeconds() );
}
function fun_a(){}
function fun_b(){}
</script>
<script src="../../jquery-mobile/jquery.mobile-1.2.0.min.js" ></script>
</head><BODY>
<div data-role=page id='p_sub1'>
<div data-role="header" data-theme="x" data-position="fixed" >
<a data-role="button" id="prv" data-icon="false" data-rel="back">Back</a>
<h1 id="title_name"> page_x </h1>
</div>
<div data-role="content" id="p1_content"> <h3>sub[1]</h3> </div>
<div data-role="footer" data-position="fixed" id="footer">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="sub1.html" ><img src="../../images/m1.png"/></a></li>
<li><a href="sub2.html" ><img src="../../images/m2.png"/></a></li>
<li><a href="sub3.html" ><img src="../../images/m3.png"/></a></li>
</ul></div>
</div>
</div></BODY></HTML>
sub2.html
...
<script>
function init(){
now = new Date();
$('#p1_content').html("Mary ....."+ now.getMinutes() +":"+ now.getSeconds() );
}
function fun_ii(){}
function fun_jjj(){}
</script>
...
each_page.js
$(function() {
var selector = ':jqmData(role=page)';
$('body').on('pageinit', selector, function(e, data) {
// initialize page
var $page = $(this);
var now = new Date();
$('#'+$page.attr('id') +' #title_name').html(""+ $page.attr('id') +"--- now:"+ now.getMinutes() +":"+ now.getSeconds() );
//alert( $page.attr('id') );
}).on('pagebeforeshow', selector, function(e, data) {
// showpage
var $page = $(this);
init();
});
});
什么叫个人页面init()
或其他方法?!
因为很多页面,都有不同的javascript方法
上面几乎只叫单身
mobileinit touch sub1.html(v.sub1.html:init(); x.sub2.html:init())