jQuery Mobile 初始化

pageinit.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>pageinit</title> 
    <link rel="stylesheet" href="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        alert("document.ready 被触发");
    });
    $(document).live("mobileinit",function(){
        alert("mobileinit 事件被触发");
    });
    $(document).delegate("#page1","pageinit",function(){
        alert("page1 页面 pageinit 事件被触发");
    });
    $(document).delegate("#page1","pageshow",function(){
        alert("page1 页面 pageshow 事件被触发");
    });
    $(document).delegate("#page2","pageinit",function(){
        alert("page2 页面 pageinit 事件被触发");
    });
    $(document).delegate("#page2","pageshow",function(){
        alert("page2 页面 pageshow 事件被触发");
    });
    
    $(function(){
        $("#triggerMobileinit").click(function(){
            $(document).trigger('mobileinit');    
        });    
        
        $("#backPageinit").click(function(){
            $("#page1").trigger('pageinit');    
        });    
    });
    </script>
    <script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>
    <section id="page1" data-role="page" data-title="第一个页面">
        <header data-role="header" data-position="fixed">
            <h1>跨平台移动应用</h1>
        </header>
        <div data-role="content"> 
            <p>执行顺序：</p>
            <p>mobileinit</p> 
            <p>$(document).ready</p> 
            <p>pageinit</p> 
            <p>pageshow</p> 
            <p><a href="basic.html" rel="external">basic页面(不使用Ajax超级链接的方式  rel="external")</a></p>
            <p><a href="#page2">第二个页面</a></p> 
            <p><a href="#" id="triggerMobileinit">js触发mobileinit</a></p> 
            <p><a href="#" onClick="$(document).trigger('mobileinit')">触发mobileinit</a></p>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第一个页面底部</h1>
        </footer>
    </section>
    <section id="page2" data-role="page" data-title="第二个页面">
        <header data-role="header" data-position="fixed">
            <h1>第二个页面</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <p><a href="#page1">第一个页面</a></p> 
            <p><a href="#page1" id="backPageinit">js 返回 并触发pageinit</a></p> 
            <p><a href="#page1" onClick="$('#page1').trigger('pageinit')">返回 并触发pageinit</a></p>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第二个页面底部</h1>
        </footer>
    </section>
</body>
</html>

1.初始化事件：

<script type="text/javascript">
    $(document).ready(function(e) {
        alert("document.ready 被触发");
    });
    $(document).live("mobileinit",function(){
        alert("mobileinit 事件被触发");
    });
    $(document).delegate("#page1","pageinit",function(){
        alert("page1 页面 pageinit 事件被触发");
    });
    $(document).delegate("#page1","pageshow",function(){
        alert("page1 页面 pageshow 事件被触发");
    });
    $(document).delegate("#page2","pageinit",function(){
        alert("page2 页面 pageinit 事件被触发");
    });
    $(document).delegate("#page2","pageshow",function(){
        alert("page2 页面 pageshow 事件被触发");
    });
    </script>

2.不使用Ajax超级链接的方式  rel="external"

<a href="pageinit.html" rel="external">pageinit页面</a>

 

basic.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>跨平台移动应用</title> 
    <link rel="stylesheet" href="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head> 
<body>
    <section id="page1" data-role="page" data-title="第一个页面">
        <header data-role="header" data-position="fixed">
            <h1>跨平台移动应用</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <a href="pageinit.html" rel="external">pageinit页面</a>
            <a href="#page2">第二个页面</a>
            <a href="#page3" data-transition="slideup">第三个页面</a>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第一个页面底部</h1>
        </footer>
    </section>
    <section id="page2" data-role="dialog" data-title="第二个页面">
        <header data-role="header" data-position="fixed">
            <h1>第二个页面</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <a href="#page1">第一个页面</a>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第二个页面底部</h1>
        </footer>
    </section>
    <section id="page3" data-role="page" data-title="第三个页面">
        <header data-role="header" data-position="fixed">
            <h1>第三个页面</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <a href="#page1">第一个页面</a>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第三个页面底部</h1>
        </footer>
    </section>
</body>
</html>

 

切换方式 data-transition="slideup"：

<a href="#page3" data-transition="slideup">第三个页面</a>

 

posted @ 2014-06-28 18:27  linyongqin  阅读(273)  评论(0)  编辑  收藏  举报