jQuery Mobile Multi-Page-method指定捕获事件

时间:2012-12-12 10:32:29

标签: jquery jquery-mobile

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())

0 个答案:

没有答案