基礎概念

元素數據之間的共享，使用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，區別是在動畫完成後才執行

jquery mobile