jquery mobile

基礎概念

元素數據之間的共享，使用jquery 的data方法。

經過data-role屬性指定元素的role，經常使用的有：page、header、content、footer，button、listview

組件、控件相關的概念基本都有對應的role能夠直接使用

一屏幕只能顯示一個page，html內若是有多個page，則其餘page會被隱藏，隱藏方式以下：

頁面的跳轉方式

內部跳轉（內鏈接）：一個html內有多個page，page上都要指定id，這些page之間的跳轉經過點擊 a href=pageId 來跳轉

外鏈接：href指定其餘頁面地址，這種方式是經過ajax來加載頁面，而後這個頁面中的第一個page內的元素插入到當前頁面中，雖然載入的僅僅是第一個page的內容，但ajax下載的時候但是把html的所有內容都下載了。那就意味着這個page之外的元素會被無視，並且被裝入的page內的環境和當前頁面的環境是一致的。當頁面被關閉（如返回），對應page的html會從當前頁面中移除，想要取消以上的效果，只須要加上rel=external便可，或者使用data-ajax="false"也能夠，但二者的側重點不一樣，前者應針對不一樣域名下的頁面，然後者是同域

 

跳轉到其餘page，除了經過a標籤，還能夠經過腳本：

$(function() {
    $.mobile.changePage("about.htm",
    { transition: "slideup" });
})

以上代碼，在頁面加載完後就跳轉到about.htm頁面，同時能夠指定過渡動畫

預加載

只針對外連接，內鏈接根本就不必預加載和緩存。

在標籤上使用<a href="about.htm" data-prefetch="true"></a>，則當前頁面會自動進行ajax請求，加載頁面，而後把裏面第一個page裝入到當前頁面中。

執行預加載會影響當前頁面的訪問速度，或者手動進行loadPage也是能夠達到預加載的目的：

$(function() {
    $.mobile.loadPage("about.htm");
})

緩存

data-prefetch、loadPage和data-dom-cache的區別

data-prefetch：只要page被顯示出來，內部指定了data-prefetch的a標籤就會執行預加載，而後把對應html內的page載入（後退回來也會從新執行data-prefetch）

loadPage：該函數執行一次，就下載和載入一次。 能夠理解爲只執行一次預加載

以上二者載入的page，在返回以後都會被銷燬，而cache載入則不會銷燬

data-dom-cache：在被載入的page元素上添加data-dom-cache="true"，點擊執行第一次ajax請求後，該頁面的page被載入到當前頁面內，以後不會再移除這個page，至關於變相成爲了內鏈接

 

cache和loadPage（或者data-prefetch效果一致）配合：自動加載，並且返回後不會被銷燬。針對這一點能夠推出prefetch的特性。若是當前頁面存在這個page的話，則不進行下載，不過對於單獨使用prefetch的狀況下（不使用cache），當被載入的page返回後，這個page就被銷燬了，致使當前page須要再次對這個page進行預加載

控件

對於role=button的a標籤，也會擁有button的樣式

後退功能： data-rel=back，會忽略a標籤的href值，給個#便可


data-icon指定圖標、data-position指定定位

有內定的樣式class，如使按鈕定位在右邊 ：ui-btn-right

後退

在page上設置data-add-back-btn="true"，僅當該page是從其餘page中打開跳轉過來的，該page的頭上纔會顯示後退按鈕。

點擊這個也能夠實現後退效果

<a data-rel="back">後退</a>

若是被打開的page是以對話框形式打開，則back也能夠關閉對話框

 

指定後退按鈕的文字：

<div id="e3" data-role="page" data-add-back-btn="true" data-back-btn-text="哈哈">

網格佈局

提供了一套列布局方案。原理是外部的grid經過overflow成爲BFC容器，而內部的列block，都是向左邊浮動

ui-block-a 有一個 clear：left樣式。因此a列一定是行的第一列，假如一個grid中出現兩個a，則第二個a由於有清除浮動，因此就移動到了下一行去了。就實現了a建立行的效果

主題

data-theme，有a~e5種，給page指定的話，則應用到整個page，給button指定的話，則僅僅引用到button上

在框架初始化，框架獲取theme值，而後拼接對應的class，添加到元素上。因此若是要動態切換主題的話，可不是單單data-theme值這麼簡答了

事件

http://w3school.com.cn/jquerymobile/jquerymobile_ref_events.asp

$(document).on("pageinit","#pageone",function(){

});

pageone是一個page的id

mobileinit

　　通常都是綁定在document上，須要在jqm導入前進行綁定，不然該綁定無效【導入、執行jqm過程當中就會觸發這個事件，因此在jqm導入後才綁定的話，這個事件早就觸發過了，因此無效】，這個方法調用的時候，還沒進行jqm控件加強，因此能夠在這個函數中對jqm進行參數配置等（如配置命名空間、配置主題等）

pagebeforecreate

　　綁定在page元素上，當page建立完成，但裏面的組件尚未初始化時，會執行這個回調方法

pagebeforehide

　　綁定在page元素上，當page被隱藏或者銷燬時，在動畫開始前會調用這個方法

pagebeforeload

　　綁定在document上，當有page被加載進當前文檔時（點擊a標籤、預加載等），會觸發這個方法

pagebeforeshow

　　綁定在page上，當page要被顯示出來時（第一個page顯示的時候也會觸發這個事件），在動畫開始前就會執行這個方法

pagechange

　　綁定在document上，觸發時機和pagebeforshow一致，只不過是在動畫以後，也就是page完成切換後才執行

pagechangefailed

　　綁定在document上，當page切換失敗後會執行，好比點擊了a標籤，href指向不存在的路徑時會執行

pagecreate

　　綁定在page上，僅當page被載入到dom後才執行。執行次序在pagebeforeshow以前

pagehide

　　對應pagebeforehide，區別是在動畫完成後才執行