移動應(yīng)用程序構(gòu)建于觸控操作的便利性之上。
在 jQuery Mobile 中創(chuàng)建按鈕
jQuery Mobile 中的按鈕可通過三種方法創(chuàng)建：
- 使用 <button> 元素
- 使用 <input> 元素
- 使用 data-role="button" 的 <a> 元素
<button>
<button>按鈕</button>
親自試一試
<input>
<input type="button" value="按鈕">
親自試一試
<a>
<a href="#" data-role="button">按鈕</a>
親自試一試
提示：jQuery Mobile 中的按鈕會自動獲得樣式，這增強(qiáng)了他們在移動設(shè)備上的交互性和可用性。我們推薦您使用 data-role="button" 的 <a> 元素來創(chuàng)建頁面之間的鏈接，而 <input> 或 <button> 元素用于表單提交。
導(dǎo)航按鈕
如需通過按鈕來鏈接頁面，請使用 data-role="button" 的 <a> 元素：
實(shí)例
<a href="#pagetwo" data-role="button">轉(zhuǎn)到頁面二</a>
親自試一試
行內(nèi)按鈕
默認(rèn)情況下，按鈕會占據(jù)屏幕的全部寬度。如果您需要按鈕適應(yīng)其內(nèi)容，或者如果您需要兩個或多個按鈕并排顯示，請?zhí)砑?data-inline="true"：
實(shí)例
<a href="#pagetwo" data-role="button" data-inline="true">轉(zhuǎn)到頁面二</a>
親自試一試
組合按鈕
jQuery Mobile 提供了對按鈕進(jìn)行組合的簡單方法。
請將 data-role="controlgroup" 屬性與 data-type="horizontal|vertical" 一同使用，以規(guī)定水平或垂直地組合按鈕：
實(shí)例
<div data-role="controlgroup" data-type="horizontal"> <a href="#anylink" data-role="button">按鈕 1</a> <a href="#anylink" data-role="button">按鈕 2</a> <a href="#anylink" data-role="button">按鈕 3</a> </div>
親自試一試
提示：默認(rèn)情況下，組合按鈕是垂直分組的，彼此間沒有外邊距和空白。并且只有第一個和最后一個按鈕擁有圓角，在組合后就創(chuàng)造出了漂亮的外觀。
后退按鈕
如需創(chuàng)建后退按鈕，請使用 data-rel="back" 屬性（會忽略錨的 href 值）：
實(shí)例
<a href="#" data-role="button" data-rel="back">返回</a>
親自試一試
更多用于按鈕的 data-* 屬性
| 屬性 | 值 | 描述 | 實(shí)例 |
|---|
| data-corners | true | false | 規(guī)定按鈕是否有圓角。 | 測試 |
| data-mini | true | false | 規(guī)定是否是小型按鈕。 | 測試 |
| data-shadow | true | false | 規(guī)定按鈕是否有陰影。 | 測試 |
如需有關(guān) jQuery Mobile data-* 屬性的完整信息，請?jiān)L問我們的 jQuery Mobile Data 屬性參考手冊。
下一節(jié)演示如何為按鈕添加圖標(biāo)。