1. JQM腳本引用
1.1 Jquery Mobile腳本引用順序
必須按下面的順序引用
<linkhref="../mobile/css/jquery.mobile.min.css"rel="stylesheet"type="text/css"/>
<%-- 這裏可添加自己的樣式表--%>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<%-- 這裏可添加自己的腳本引用--%>
<script src="js/jquery.mobile.min.js" type="text/javascript"></script>
具體原因是因爲Jquery Mobile是通過腳本做渲染的,我們的腳本對頁面html的改變必須在渲染之前,否則樣式會出現問題(個人的理解).
1.2 Jquery Mobile腳本是否必須在各個頁面中都引用
1.2.1 採用JQM的ajax方式加載頁面時
因爲採用JQM的ajax方式(詳細講解參見”JQM頁面載入方式”)加載頁面時,每次打開新的頁面不會刷新頁面而是將新頁面裏面的page容器加載到當前頁面,所以當前頁面引用的腳本依然可見,因此:
Ø 當網站有固定的入口頁時,只需要在入口頁引用公共腳本,其他後續的頁面都可以共享入口頁的引用.
Ø 當網站沒有固定的入口頁時,就在每個頁面頭部都寫上公用腳本引用的代碼.
1.2.2 未採用JQM的ajax方式加載頁面時
未採用ajax方式加載頁面時,就必須每個頁面都有公用腳本引用的代碼.
2. JQM腳本寫法經驗
2.1 幾個關鍵的頁面加載事件
中大項目中手機端用的beta1版本的Jquery Mobile,今天看到最新發布的beta3版本里面有些事件名做了改動,這裏關鍵的事件說明我參考beta3的說明文檔來總結.
2.1.1 pagebeforeshow事件
每次頁面加載的時候都會觸發,在頁面渲染之前.
2.1.2 pagebeforehide事件
每次轉到新頁面之前都會觸發當前頁面的該事件,在當前頁面隱藏之前.
2.1.3 pageshow事件
每次頁面加載的時候都會觸發,在頁面渲染之後.
2.1.4 pagehide事件
每次轉到新頁面之前都會觸發當前頁面的該事件,在當前頁面隱藏之後.
2.1.5 pagebeforecreate事件
這裏貼一下原文描述:
Triggeredon the page being initialized, before most plugin auto-initialization occurs.
Note that by binding to pagebeforecreate, you can manipulate markup before jQuery Mobile's default widgets areauto-initialized. For example, say you want to add data-attributes viaJavaScript instead of in the HTML source, this is the event you'd
use.
2.1.6 pagecreate事件
每個頁面第一次加載的時候會觸發. 具體什麼時候沒能理解,
這裏貼一下原文描述:
Triggered on the page beinginitialized, after initialization occurs. We recommend binding to this eventinstead of DOM ready() because this will work regardless of whether the page isloaded directly or if the content is pulled into another page as part of the Ajax navigation system.
2.2 腳本寫法上的一些經驗
2.2.1 頁面腳本寫在哪裏?
頁面自己的腳本(非公用),必須寫在頁面的page容器裏面.
原因:ajax方式加載頁面時,不加載html的head部分,所以常規的寫在head裏面的腳本是不會被加載的.
2.2.2 加載數據的腳本寫在哪裏?
加載數據的腳本必須寫在"pagebeforeshow"或"pageshow"事件的響應裏面
原因:此兩個事件每次頁面顯示的時候都會觸發,JQMajax方式打開過的頁面沒有刷新頁面的時候是不會銷燬,只是隱藏掉,下次在請求同一個頁面就會將dom中的該頁面再顯示出來,比如detail頁同一個頁面可能每次打開都會是不同的數據,所以每次都要重新獲取數據,所以獲取數據並渲染的方法寫在"pagebeforeshow"或"pageshow"這兩個事件裏面.
2.2.3 事件綁定的腳本寫在哪裏?
事件綁定的腳本寫在"pagebeforecreate"的事件響應裏邊.
原因: 之前項目中我原先把事件的綁定寫在"pageshow"事件的響應裏邊,因爲"pageshow"每次頁面顯示的時候都會觸發,所以這樣當一個頁面多次顯示的時候就會造成一個事件綁定多次的情況,就會產生bug.後來改成寫在"pagebeforecreate"的事件響應裏邊,並且用jquery的live方式綁定事件,這樣就沒有問題了.
JQM的demo說明裏面有一句話pagecreate = DOMready.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
我的應用，歡迎下載試玩：https://itunes.apple.com/cn/app/you-gou-yi-pin/id1109299811?l=en&mt=8
