1. JQM頁面結構
jQuery Mobile是通過data-role屬性來區分渲染界面樣式的,JQM裏面提供的data-role如下表:
|
參數 |
說明 |
|
page |
頁面容器，其內部的mobile元素將會繼承這個容器上所設置的屬性 |
|
header |
頁面標題容器，這個容器內部可以包含文字、返回按鈕、功能按鈕等元素 |
|
footer |
頁面頁腳容器，這個容器內部也可以包含文字、返回按鈕、功能按鈕等元素 |
|
content |
頁面內容容器，這是一個很寬容的容器，內部可以包含標準的html元素和jQueryMobile元素 |
|
controlgroup |
將幾個元素設置成一組，一般是幾個相同的元素類型 |
|
fieldcontain |
區域包裹容器，用增加邊距和分割線的方式將容器內的元素和容器外的元素明顯分隔 |
|
navbar |
功能導航容器，通俗的講就是工具條 |
|
listview |
列表展示容器，類似手機中聯繫人列表的展示方式 |
|
list-divider |
列表展示容器的表頭，用來展示一組列表的標題，內部不可包含鏈接 |
|
button |
按鈕，將鏈接和普通按鈕的樣式設置成爲jQueryMobile的風格 |
|
none |
阻止框架對元素進行渲染，使元素以html原生的狀態顯示，主要用於form元素 |
jQuery Mobile應用了HTML5標準的特性，在結構化的頁面中完整的頁面結構分爲header、content、footer這三個主要區域。
在body中插入內容塊：
<divdata-role="page">
<div data-role="header">...</div>
<divdata-role="content">...</div>
<divdata-role="footer">...</div>
</div>
data-role="page”代表這個div是一個Page，在一個屏幕中只會顯示一個page；
header是標題，content是內容塊，footer是頁腳.
2. JQM的ajax加載模式
jQuery Mobile爲了減少頁面加載的數據量,實現了頁面的ajax加載模式.當使用ajax方式(鏈接標籤上加上data-ajax="true")加載頁面時,只在第一個頁面加載html的全部內容,包括html的head裏面引用的樣式腳本文件,後面載入的頁面只加載data-role="page"的div容器的內容,所以非第一次加載的頁面裏面的腳本(javascript)必須寫在data-role="page"的div容器裏面.
圖示ajax加載模式
非ajax加載模式(data-ajax="false"時)即大家所熟悉的常規頁面加載模式,這裏就不敷述了.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
我的應用，歡迎下載試玩：https://itunes.apple.com/cn/app/you-gou-yi-pin/id1109299811?l=en&mt=8