按鈕在用作導航時應該被編碼成a標記的鏈接，而提交表單的按鈕則被編碼成 button元素 — 它們會被框架提供相同的樣式。

為鏈接應用button樣式

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

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

鏈接按鈕表單按鈕

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

基于表單(form-based)的按鈕的原始按鈕(input)是隱藏的，但是依然保留其標記。 當一個按鈕的點擊事件觸發(fā)時，也會在原始的表單按鈕上觸發(fā)點擊事件。#p#

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

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

Button如果您有多個按鈕，并想使它們排成一排，那么包含按鈕的容器也需要有一個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>  
</div> 

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

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

<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" 屬性使得分組按鈕能水平排布 （請注意，如果對于屏幕來說它們的寬度太寬了，它們則會折行）。#p#

主題化

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

分配主題調(diào)板

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

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