图中用红色框圈起来的是界面中的事件,测试代码如下:
<!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.6.4.js" type="text/javascript" ></script> <script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script> <script> $(document).ready(function(e){ alert("document.ready被触发"); }); $(document).live("mobileinit", function(){ alert("mobileinit事件触发"); }); $(document).delegate("#page_MobileInit0", "pageinit", function(){ alert("page_MobileInit0页面的pageinit事件被触发"); }); $(document).delegate("#page_MobileInit0", "pageshow", function(){ alert("page_MobileInit0页面的pageshow事件被触发"); }); $(document).delegate("#page_MobileInit1", "pageinit", function(){ alert("page_MobileInit1页面的pageinit事件被触发"); }); $(document).delegate("#page_MobileInit1", "pageshow", function(){ alert("page_MobileInit1页面的pageshow事件被触发"); }); </script> </head> <body> <section id="page_MobileInit0" data-role="page"> <header data-role="header"> <h1>页面事件</h1> </header> <p class="content" data-role="content"> <p>jQuery Mobile页面初始化是通过mobileinit、$(document).ready()以及pageinit实现的</p> <a href="#" onclick="$(document).trigger('mobileinit')">手动触发mobileinit事件</a> <a href="#page_MobileInit1">下一页</a><br/></p> </p> </section> <section id="page_MobileInit1" data-role="page"> <header data-role="header"> <h1>页面事件</h1> </header> <p class="content" data-role="content"> <p>jQuery Mobile页面初始化是通过pageinit实现的<br/> <a href="#page_MobileInit0">返回</a></p> </p> </section> </body> </html>
除了上面介绍的事件外,还有onload事件。当所有相关内容(包括图片)加载完成后会触发onload事件。因为受到图片等内容的影响,onload事件的触发时间比较晚。虽然在页面开发中也会用到onload事件,但是在jQuery Mobile开发中,主要使用的是mobileinit、ready()和pageinit这3种初始化事件。
以上就是小强的HTML5移动开发之路(50)——jquerymobile页面初始化过程的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!