jQuery Mobile筆記

1.獲取jQuery mobile 文件，訪問jQuerymobile網站下載

（貌似使用jquery mobile後，jquery會自動在網頁中添加一些class類，第一次知道的我是被嚇呆的！！）

2.須要使用數據屬性，數據屬性是HTML5引入的，以data-開頭

好比data-role能夠用於定義頁眉，頁腳，內容，頁面等

• data-role="page" 是在瀏覽器中顯示的頁面。
• data-role="header" 是在頁面頂部建立的工具條 (一般用於標題或者搜索按鈕)
• data-role="main" 定義了頁面的內容，好比文本， 圖片，表單，按鈕等。
• "ui-content" 類用於在頁面添加內邊距和外邊距。
• data-role="footer" 用於建立頁面底部工具條。

3.當jquery mobile中定義多個頁面,:page時，在移動端會默認只出現一個頁面

4.當遇到鏈接時，若是是同一個頁面的其餘內容，或者是同個服務器上的其餘內容，會使用ajax加載頁面

而當遇到外部網站，會執行常規的鏈接操做

若是要禁用jquery mobile 的操做，則用數據屬性：data-ajax=「false」

5.jquery頁面設置

頁面標題:在頁面標籤中用data-title設置，也能夠在header標籤中設置

預取內容

在一個站點中，有幾個網頁是常常被用戶加載的，爲了提升加載速度，可讓瀏覽器後臺在主頁面加載時預先讀取。具體設置爲在相應鏈接中添加data-prefetch=「true」

修改頁面的過分方式

data-transition:poo(彈出窗口），fade,flip,flow,slide（從右到左滑動），slidedown（從上到下滑動），slidefade,turn,none

6.頁眉添加按鈕

在header頁面中添加按鈕，添加a鏈接

只在頁眉右邊添加一個按鈕：class=「ui-btn-right」

能夠在按鈕中添加圖標  data-icon

7.添加返回按鈕

添加data-add-back-btn="true"

設置a鏈接爲空，並設置data-rel=「back」

在頁腳中添加按鈕，他不會在按鈕四周保持空間，需添加「ui-bar類型

 

8.固定頁眉和頁腳

在頁眉頁腳中添加data-position=「fixed」

全屏的頁眉頁腳：data-fullscreen="true"

9.建立導航欄

在div標籤中添加data-role=「navbar」,而後建立無序列表

在激活的按鈕加上「uibtn-active」的類型標籤

一行最多隻能添加五個按鈕，過多按鈕會被拆分

10.多頁面持久頁腳

全部頁面使用的data-id相同

須要添加「ui-btn-active,ui-state-persist」

class標籤

11.列表功能

無序列表中ul添加data-role=「listview」

在li中添加a鏈接後，列表中會添加箭頭icon

內嵌列表：ul中添加data-inset=「true」

列表分隔符：li中添加data-role=「listdriver」或ul中加data-autodrivers=「true」

 

12.在列表中添加縮略圖或圖標

在li中添加img,或在添加「ui-li-icon」的class類型，圖標要指定位置，否則圖標不顯示： ui-btn-icon-top/bottom/left

拆分行的列表，在ul中添加data-spliticon=「delete」

13.列表的搜索過濾

在ul中添加data-filter=「true」

默認不去分大小寫，經過ajax方式檢索

14.使用tel和mailto自動調用手機的撥號和電子郵件功能 

15.表單的提交功能

在jquery-lmobie中都是經過ajax提交的

表單組件會自動優化

表單提交的div中添加data-role="fieldcontain"

 

16.選擇菜單

如需隱藏標籤，請使用 class ui-hidden-accessible。這在您把元素的 placeholder 屬性做爲標籤時常常用到

咱們可使用 data-clear-btn="true" 屬性來添加清除輸入框內容的按鈕 (一個在輸入框右側的 X 圖標)

jQuery Mobile 經過 AJAX 自動處理表單提交，並將試圖集成服務器響應到應用程序的 DOM 中。

• <form> 元素必須有一個 method 和一個 action 屬性
• 每一個表單元素必須有一個惟一的 "id" 屬性。id 必須是整個站點全部頁面上惟一的。這是由於 jQuery Mobile 的單頁導航機制使得多個不一樣頁面在同一時間被呈現
• 每一個表單元素必須有一個標籤。設置標籤的 for 屬性來匹配元素的 id

使用效果與使用平臺有關

17.搜索組件與滑塊組件

 

開關組件

<form method="post" action="demoform.php">

  <label for="switch">切換開關：</label>

    <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False"  checked>（默認選中）

</form>

 

滑塊組件，類型改成range

 

18.禁用原生表單控件

data-role="none"

迷你組件：data-mini="true"

 

19.建立模態對話框(如下兩種辦法均可以)

a連接中添加data-rel="dialog"

page中添加data-dialog="true"

 

20.使用網格進行內容佈局

在div標籤中添加class=「ui-grid-a」，（a表示兩列網格，b表示三列網格，以此類推）

在div標籤中再添加class=「ui-block-a」(從a到d)

 

21.讓html元件響應式的只能適應不一樣尺寸

在現有網格中添加class=「ui-reponsive」

摺疊框：data-role=「collapsible」（初始狀況下展開：再添加data-collapsible=「false」）

可將收縮icon挪到右邊：data-iconpos=「right」

可摺疊集合： data-role=「collapsible-set」

 

22.彈出式窗口

首先寫一個區塊：data-role=「popup」

而後寫一個a連接做爲按鈕（以啓動事件）：

<a href="#f" data-role="button" data-rel="popup" data-position-to="window">sss</a>

 

23.表格( 響應式：列迴流和列切換)

在table標籤中添加data-role=「table」 class="ui-responsive table-stroke"（分別是響應式和出現表格邊框）

（添加響應式後，原先橫版的表格，會在分辨率改變時變爲豎版的）

 

能夠根據用戶須要過濾性的顯示數據

添加data-mode="columntoggle"

而後在thead中給列標題添加權重：data-priority="1~10"

對按鈕文本改變：data-column-btn-text=「？？」

 

24.添加面板

添加data-role=「panel」，並且必須在content外添加

data-position=「left/right」能夠設置面板的方向

經過設置data-display屬性來訂正顯示方式：reveal、push、overveal

 

25.建立按鈕

• 使用 <button> 元素
• 使用 <input> 元素
• 使用帶有 data-role="button" 的 <a> 元素

組合按鈕（水平/豎直）： data-role="controlgroup" 和 data-type="horizontal|vertical"

後退按鈕： <a href="#" data-role="button" data-rel="back">返回</a>

 

26.juqery mobile定義了多種主題，也能夠自定義

http://www.runoob.com/jquerymobile/jquerymobile-themes.html

 

27.jquery mobile事件

 

 jQuery on() 方法用於綁定事件到選中的元素上。

 

<script>
$(document).on("pagecreate","#pageone",function(){

    // jQuery 事件...

});

</script>

 

旋轉事件： window.orientation 屬性針對縱向視圖返回 0，針對橫向視圖返回 90 或 -90。

頁面加載：

jquery應用通常都是用$(document).ready來進行初始化，可是jquery mobile這一點卻不怎麼好用，由於jquery mobile使用ajax加載頁面， $(document).ready只對第一個頁面有效

所以須要使用pagecreate事件