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>