移動(dòng)應(yīng)用程序構(gòu)建于觸控操作的便利性之上。

在 jQuery Mobile 中創(chuàng)建按鈕

jQuery Mobile 中的按鈕可通過(guò)三種方法創(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 中的按鈕會(huì)自動(dòng)獲得樣式，這增強(qiáng)了他們?cè)谝苿?dòng)設(shè)備上的交互性和可用性。我們推薦您使用 data-role="button" 的 <a> 元素來(lái)創(chuàng)建頁(yè)面之間的鏈接，而 <input> 或 <button> 元素用于表單提交。

導(dǎo)航按鈕

如需通過(guò)按鈕來(lái)鏈接頁(yè)面，請(qǐng)使用 data-role="button" 的 <a> 元素：

實(shí)例

<a href="#pagetwo" data-role="button">轉(zhuǎn)到頁(yè)面二</a>

親自試一試

行內(nèi)按鈕

默認(rèn)情況下，按鈕會(huì)占據(jù)屏幕的全部寬度。如果您需要按鈕適應(yīng)其內(nèi)容，或者如果您需要兩個(gè)或多個(gè)按鈕并排顯示，請(qǐng)?zhí)砑?data-inline="true"：

實(shí)例

<a href="#pagetwo" data-role="button" data-inline="true">轉(zhuǎn)到頁(yè)面二</a>

親自試一試

組合按鈕

jQuery Mobile 提供了對(duì)按鈕進(jìn)行組合的簡(jiǎn)單方法。

請(qǐng)將 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)情況下，組合按鈕是垂直分組的，彼此間沒(méi)有外邊距和空白。并且只有第一個(gè)和最后一個(gè)按鈕擁有圓角，在組合后就創(chuàng)造出了漂亮的外觀。

后退按鈕

如需創(chuàng)建后退按鈕，請(qǐng)使用 data-rel="back" 屬性（會(huì)忽略錨的 href 值）：

實(shí)例

<a href="#" data-role="button" data-rel="back">返回</a>

親自試一試

更多用于按鈕的 data-* 屬性

如需有關(guān) jQuery Mobile data-* 屬性的完整信息，請(qǐng)?jiān)L問(wèn)我們的 jQuery Mobile Data 屬性參考手冊(cè)。

下一節(jié)演示如何為按鈕添加圖標(biāo)。