1、頁面
jQuery Mobile應用了HTML5标準的特性，在結構化的頁面中完整的頁面結構分為header、 content、footer這三個主要區域。
在body中插入内容塊：
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div> data-role="page”代表這個div是一個Page，在一個螢幕中隻會顯示一個page；
header是标題，content是内容塊，footer是頁腳
data-role參數表：
參數
說明
page
頁面容器，其内部的mobile元素将會繼承這個容器上所設定的屬性
header
頁面标題容器，這個容器内部可以包含文字、傳回按鈕、功能按鈕等元素
footer
頁面頁腳容器，這個容器内部也可以包含文字、傳回按鈕、功能按鈕等元素
content
頁面内容容器，這是一個很寬容的容器，内部可以包含标準的html元素和jQueryMobile元素
controlgroup
将幾個元素設定成一組，一般是幾個相同的元素類型
fieldcontain
區域包裹容器，用增加邊距和分割線的方式将容器内的元素和容器外的元素明顯分隔
navbar
功能導航容器，通俗的講就是工具條
listview
清單展示容器，類似手機中聯系人清單的展示方式
list-divider
清單展示容器的表頭，用來展示一組清單的标題，内部不可包含連結
button
按鈕，将連結和普通按鈕的樣式設定成為jQueryMobile的風格
none
阻止架構對元素進行渲染，使元素以html原生的狀态顯示，主要用于form元素。
2、頁面動畫
data-transition屬性可以定義頁面切換是的動畫效果。
例如：
<a href="index.html" data-transition="pop">I'll pop</a>
data-transition參數表：
slide
從右側向左滑入頁面
slideup
從底部向上滑入
slidedown
從上向下滑入
pop
從中心漸顯展開
fade
漸顯
flip
翻轉
備注：如果想要在目标頁面中顯示後退按鈕，可以在連結中加入data-direction="reverse"屬性，這個屬性和原來的data-back="true"相同，不知道在正式版本中将會保留哪個屬性。
3、模态對話框
模态對話框是一種帶有圓角标題欄和關閉按鈕的僞浮動層，用于獨占事件的應用。任何結構
化的頁面都可以用data-rel="dialog"連結的方式實作模态對話框應用。
例如：<a href="foo.html" data-rel="dialog">Open dialog</a>
這個頁面切換效果同樣可以使用标準頁面的data-transition參數效果。建議使用"pop"、"slideup" 和"flip"參數以達到更好的效果。
這個模态對話框會預設生成關閉按鈕，用于回到父級頁面。在腳本能力較弱的裝置上也可以添加一個帶有data-rel="back"的連結來實作關閉按鈕。
針對支援腳本的裝置可以直接使用href=”#”或者data-rel="back"來實作關閉。還可以使用内置的”close”方法來關閉模态對話框，例如：$('.ui-dialog').dialog('close')。
由于模态對話框是動态顯示的臨時頁面，是以這個頁面不會被儲存在哈希表内，這就意味着我們講無法後退到這個頁面，例如你在A頁面中點選一個連結打開B對話框,操作完成并關閉對話框,然後跳轉到C頁面,這時候你點選浏覽器的後退按鈕，這時候将回到A頁面，而不是B頁面。
4、工具條
工具條主要用于”header”,”footer”等區域，用來支撐和實作頁面中業務功能的應用。jQuery Mobile提供了一個相對完整的解決方案。
工具條分為:标題（header bar）,頁腳（footer bar）和導航（nav bar）這三中應用。
其中标題和頁腳在頁面中有一些不同的應用方式，預設工具條是以嵌入（inline）的方式定位的，這種定位方式可以實作最大限度的相容性，包括在對腳本和css相容性不佳的裝置都有很好的優化。
另一種是浮動（fixed）定位的方式，也可以成為“靜态“定位，這種定位方式可以讓工具條始終保持在螢幕的頂部或者底部。并可以接受點選事件來顯示/隐藏工具條，已達到最大化利用螢幕空間的目的。
實作方式：在标題和頁腳區域加入data-position="fixed"屬性。
标題容器
标題容器是頁面頁眉區域的顯示控件，主要用來顯示标題和主要操作的區域。
結構代碼：
<div data-role="header">
<h1>Page Title</h1>
</div>
為了友善頁面的互動在頁面切換後會在标題容器的左側自動生成一個後退按鈕，這樣可以簡化我們的開發複雜程度，但是有些時候我們會因為應用的需求而不需要這個後退按鈕，可以在标題容器上添加data-backbtn="false"屬性用來阻止後退按鈕的自動建立。
标題容器的左側和右側分别可以放置一個按鈕，在阻止自動生成的後退按鈕後，我們就可以在後退按鈕的位置來自定義按鈕了。
<div data-role="header" data-position="inline" data-backbtn="false" >
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
如果需要自定義預設的後退按鈕中的文本，可以用data-back-btn-text="previous"屬性來實作，或者通過擴充的方式實作：$.mobile.page.prototype.options.backBtnText = "previous"。
如果你沒有使用标準的結構來建立标題區域，那麼架構将不會自動生成預設的按鈕。
5、頁腳容器
頁腳容器的結構和标題容器的結構基本相同，隻要把data-role屬性的參數設定為”footer”。
<div data-role="footer">
<h4>Footer content</h4>
與标題容器相比頁腳容器有更多的靈活度，它不會想标題容器一樣隻允許放置兩個按鈕，并且也不會預設的把按鈕放置在左右的頂端，頁腳的按鈕預設是從左到右依次排列的，并且何以放置更多的按鈕。
在頁腳容器上隻要添加一個class="ui-bar"就可以将頁腳變成一個工具條，你可以不用設定任何的布局樣式就可以在其中添加整齊的按鈕。
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
如果我們需要一組連結效果，我們可以這樣寫：
<div data-role="footer" class="ui-bar" data-position="inline">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-icon="delete">Remove</a>
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
技巧：通過使用data-id屬性可以讓多個頁面使用相同的頁腳。
6、導航
導航容器是一個可以每行容納最多5個按鈕的按鈕組控件，用一個擁有data-role="navbar"屬性的div來容納這些按鈕。
例子：
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
在預設的按鈕上添加class="ui-btn-active"
如果按鈕的數量超過5個，導航容器将會自動以合适的數量配置設定成多行顯示。
按鈕
你可以将頁面中的任何一個連結通過data-role="button"來聲明成為按鈕的顯示風格。為了風格統一，架構會在頁面加載時自動将form類的按鈕格式化為jQuery Mobile風格的按鈕，不需要添加data-role屬性。
架構中包含了一組常用的圖示可以用于按鈕，用data-icon屬性中的參數來定義顯示不同的圖示效果。
例如：<a href="index.html" data-role="button" data-icon="delete">Delete</a>
data-icon原生參數清單
圖示
arrow-l
arrow-r
arrow-u
arrow-d
delete
plus
minus
check
gear
refresh
forward
back
grid
star
alert
info
home
search
除了可以預設顯示左側的圖示之外，還可以用data-iconpos屬性來定義圖示與文字的位置關系。
data-iconpos參數清單：
效果
right
圖示在文字的右側
top
圖示在文字上面
bottom
圖示在文字下面
data-iconpos="notext"屬性可以讓按鈕隐藏文字。
内聯樣式
在架構中預設情況下按鈕是橫向獨占根據螢幕寬度橫向自适應的，但是我們在應用的應用中經常需要在一行中顯示多個按鈕，這時候我們就需要知道一個新的叫做内聯模式的屬性了data-inline="true"。
<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
7、 按鈕組
jQuery Mobile架構可以将幾個按鈕以組的方式顯示，data-role="controlgroup"用以展示按鈕間的緊湊關系。例如：
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
如果需要按鈕橫向排列可以增加data-type="horizontal"屬性。
表單應用
jQuery Mobile架構為原生的html表單元素封裝了新的表現形式，對觸屏裝置的操作進行了優化。在架構的頁面中會自動将form元素渲染成jQuery Mobile風格的元素。
form元素的使用和預設的html方式使用相同，可以同樣使用Post和get方式送出資料，但是需要注意的是元素的ID命名問題，在正常的規範中同一個頁面中是不允許出現相同的ID命名的，在jQuery Mobile中由于其允許在同一個DOM中存在多個頁面，是以建議form元素的ID命名在整個項目中是唯一的，防止由于ID問題引發的錯誤。
預設情況下架構會自動渲染在标準頁面中的form元素的風格，一旦成功渲染後，這個控件元素将可以使用jQuery中的函數進行操作。
在某些情況下，我們需要使用html原生的form元素，為了阻止mobile架構對該元素的自動渲染，在架構中我們在data-role屬性中引入了一個控制參數”none”。使用這個屬性參數就會讓該元素以html原生的狀态顯示。
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
8、清單應用
資訊清單是開發應用中使用頻率相對比較高的控件，用于資料顯示、導航, 資料清單等。為了适應不同的資訊内容，清單的表現形式也多種多樣。
清單的代碼結構是以有序和無序清單來實作的，隻要在ul或ol上聲明data-role="listview"就可以讓架構以清單的方式渲染了，例如：
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
如果需要在清單裡添加資料，則需要在資料加載後執行refresh()方法對清單進行資料更新。
例如：$('ul').listview('refresh');
另附上一個不錯的學習網站：http://www.w3cschool.cc/jquerymobile/jquerymobile-tutorial.html
![用js實作的一個加載中狀态的動态效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)