data-role參數表：
page 頁面容器，其內部的mobile元素將會繼承這個容器上所設置的屬性
header 頁面標題容器，這個容器內部可以包含文字、返回按鈕、功能按鈕等元素
footer 頁面頁腳容器，這個容器內部也可以包含文字、返回按鈕、功能按鈕等元素
content 頁面內容容器，這是一個很寬容的容器，內部可以包含標準的html元素和jQueryMobile元素
controlgroup 將幾個元素設置成一組，一般是幾個相同的元素類型
collapsible 頁面中可折疊的內容面板
collapsible-set 一組可折疊的面板（手風琴布局）
fieldcontain 區域包裹容器，用增加邊距和分割線的方式將容器內的元素和容器外的元素明顯分隔
navbar 功能導航容器，通俗的講就是工具條
listview 列表展示容器，類似手機中聯系人列表的展示方式
list-divider 列表展示容器的表頭，用來展示一組列表的標題，內部不可包含鏈接
button 按鈕，將鏈接和普通按鈕的樣式設置成為jQueryMobile的風格
none 阻止框架對元素進行渲染，使元素以html原生的狀態顯示，主要用于form元素。
dialog 對話頁面
slider 用于布爾值的可視化滑塊
nojs 在兼容jQueryMobile的瀏覽器上會被隱藏的元素
data-transition參數表：
slide 從右側向左滑入頁面
slideup 從底部向上滑入
slidedown 從上向下滑入
pop 從中心漸顯展開
fade 漸顯
flip 翻轉
data-iconpos參數表：
right 圖標在文字的右側
top 圖標在文字上面
bottom 圖標在文字下面
pop 從中心漸顯展開
fade 漸顯
flip 翻轉
eg:
Toolbar：
<div data-role="header | footer | navbar"></div>
例：
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>
主題樣式：data-theme="a | b | c | d | e"
位置固定：data-pisition="fixed"
全屏樣式：data-fullscreen="true"
返回按鈕：data-rel="back"
反向過渡：data-direction="reverse"
按鈕位置：data-role="button" class="ui-btn-right"
自定義導航菜單： class="ui-bar ui-bar-b"
例：
<div class="ui-bar ui-bar-b">
<h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
</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>
鏈接：
打開對話框：<a href="#" data-rel="dialog">Dialog link</a>
對話框大小設置：
.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { max-width: 500px; margin: 10% auto 15px auto; }
對話框遮罩主題：data-overlay-theme="a | b | c | d | e"
頁面過渡：data-transition="fade | pop | flip | turn | flow | slide | slideup | slidedown | none"
Buttons：
<a href="index.html" data-role="button">Link button</a>
小按鈕：data-mini="true"
按鈕上的圖標：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="top | bottom | left | right"
無文字按鈕：data-iconpos="notext"
自定義圖標：data-icon="myicon" .ui-icon-myicon{ }
按鈕并列：data-inline="true"
按鈕組：data-role="controlgroup"
水平按鈕組：data-type="horizontal"
例：
<div data-role="controlgroup" data-type="horizontal">
<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>
</div>
Content：
標題：h1 、h2。。。；文本區域；圖片；
可折疊： data-role="collapsible"
內容主題：data-content-theme=“a”
默認展開：data-collapsed="false"
小號折疊：data-mini="true"
可折疊組：data-role="collapsible-set"
例：
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>
網格：class="ui-grid"
兩列 (ui-grid-a)
三列(ui-grid-b)
四列 (ui-grid-c)
五列 (ui-grid-d)
例：
<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>
List Views：
列表：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>
</ul>
編號列表：<ol data-role="listview"><li></li><li></li></ol>
只讀列表：沒有<a>鏈接
列表塊：<ul data-role="listview" data-inset="true">
調用ListView的插件：$('#mylist').listview();
更新列表：$('#mylist').listview('refresh');
Form Elements：
表單結構：
<form action="form.php" method="post"> ... </form>
隱藏標簽：
<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>
或者
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>
</div>
禁用表單元素：disable & enable
表單容器： data-role="fieldcontain"
刷新表單元素：
復選框:
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
單選框:
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
下拉菜單:
var myselect = $("#selectfoo");myselect[0].selectedIndex = 3;myselect.selectmenu("refresh");
Sliders:
$("input[type='range']").val(60).slider("refresh");
開關:
var myswitch = $("#selectbar");myswitch[0].selectedIndex = 1;myswitch.slider("refresh");
保持原生態：data-role="none"
滑塊：
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="60" min="0" max="100" step="50"data-highlight="true"data-theme="a" data-track-theme="b"/>
開關：
<div data-role="fieldcontain">
<label for="flip-c">Flip switch:</label>
<select name="slider" id="flip-c" data-role="slider" data-theme="a">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
單選復選：type="radio" type="checkbox"水平排列<fieldset data-role="controlgroup" data-type="horizontal"> ,單選框name要一致。
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Pig</label>
</fieldset>
</div>
下拉菜單：彈出式data-native-menu="false"
<div data-role="fieldcontain">
<label for="select-choice-5" class="select">Shipping method:</label>
<select name="select-choice-5" id="select-choice-5" data-native-menu="false">
<option>Choose one...</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select></div>