按鈕在用作導(dǎo)航時(shí)應(yīng)該被編碼成a標(biāo)記的鏈接，而提交表單的按鈕則被編碼成 button元素 — 它們會(huì)被框架提供相同的樣式。

為鏈接應(yīng)用button樣式

在一個(gè)頁面的的主要內(nèi)容區(qū)域，你可以把任何a標(biāo)記都轉(zhuǎn)變成button樣式，只需要添加data-role="button"屬性即可。 即可會(huì)自動(dòng)添加所有必須的樣式class來把a(bǔ)標(biāo)記都轉(zhuǎn)變成button樣式。例如：

<a href="index.html" data-role="button">Link button</a>  

鏈接按鈕表單按鈕

為了簡(jiǎn)化編寫樣式代碼，框架自動(dòng)把任何帶有type="submit"/"reset"/"button"/"image" 的 button 元素或者input元素轉(zhuǎn)換為基于連接的button樣式 — 不需要添加data-role="button" 屬性。

基于表單(form-based)的按鈕的原始按鈕(input)是隱藏的，但是依然保留其標(biāo)記。 當(dāng)一個(gè)按鈕的點(diǎn)擊事件觸發(fā)時(shí)，也會(huì)在原始的表單按鈕上觸發(fā)點(diǎn)擊事件。#p#

默認(rèn)情況下，在正文內(nèi)容所有按鈕都自稱為塊級(jí)元素，所以他們會(huì)充滿整個(gè)屏幕的寬度：

Button但是，如果你想要一個(gè)更緊湊的按鈕，讓其只和它包含的文字和圖標(biāo)的寬度相適應(yīng)，添加data-inline="true" 即可。

Button如果您有多個(gè)按鈕，并想使它們排成一排，那么包含按鈕的容器也需要有一個(gè)data-inline="true" 屬性。 這會(huì)使按鈕排成一排并向左浮動(dòng)。

<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>  
</div> 

Cancel Save如果你想要按鈕排成一排的同時(shí)也充滿整個(gè)屏幕，你可以使用內(nèi)容網(wǎng)格系統(tǒng)來把普通按鈕排列成2或3列。#p#

有時(shí)候，你可能要把某組按鈕設(shè)置在一起，形成一個(gè)單獨(dú)的塊，看起來像導(dǎo)航組件。要獲得這種效果，把這組按鈕包裹在一個(gè)含有data-role="controlgroup" 屬性的容器里 — 框架會(huì)創(chuàng)建一個(gè)垂直排列的按鈕組，并去掉它們之間所有的填白和陰影，并只給第一個(gè)和最后一個(gè)按鈕添加圓角。

<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>  
</div>

通過為controlgroup容器添加data-type="horizontal" 屬性使得分組按鈕能水平排布 （請(qǐng)注意，如果對(duì)于屏幕來說它們的寬度太寬了，它們則會(huì)折行）。#p#

主題化

jQuery Mobile擁有豐富的 主題化系統(tǒng) ，讓您完全控制按鈕的風(fēng)格。 當(dāng)鏈接被添加到一個(gè)容器時(shí)，它會(huì)自動(dòng)被分配一個(gè)和其父級(jí)(工具條或者內(nèi)容框)容器相匹配的主題調(diào)板，就像變色龍。 所以一個(gè)按鈕在一個(gè)a調(diào)板的容器里就會(huì)自動(dòng)被分配為a的調(diào)板。

分配主題調(diào)板

按鈕也可以手工添加主題調(diào)板(使用 data-theme屬性) 。

<a href="index.html" data-role="button" data-theme="a">Theme a</a>