為了方便說明和更直觀的展示jquerymobile的頁面初始化過程以及各個事件的觸發過程,我繪製了一幅流程圖:
圖中用紅色框圈起來的是界面中的事件,測試程式碼如下:
<!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中文網(www.php.cn)!