# jQuery Mobile 按鈕 Mobile 應用程序是建立在您想要顯示的簡單的點擊事物上。  ## 在 jQuery Mobile 中創建按鈕 在 jQuery Mobile 中，按鈕可通過三種方式創建： * 使用 &lt;button&gt; 元素 * 使用 &lt;input&gt; 元素 * 使用帶有 data-role="button" 的 &lt;a&gt; 元素 ## &lt;button&gt; ``` <button>按鈕</button> ``` ## &lt;input&gt; ``` <input type="button" value="按鈕"> ``` ## &lt;a&gt; ``` <a href="#" data-role="button">按鈕</a> ``` >  > 在 jQuery Mobile 中，按鈕會自動樣式化，讓它們在移動設備上更具吸引力和可用性。**我們推薦您使用帶有 data-role="button" 的 &lt;a&gt; 元素在頁面間進行鏈接，使用 &lt;input&gt; 或 &lt;button&gt; 元素進行表單提交。** ## 導航按鈕 如需通過按鈕在頁面間進行鏈接，請使用帶有 data-role="button" 屬性的 &lt;a&gt; 元素： ## 實例 ``` <a href="#pagetwo" data-role="button">訪問第二個頁面</a> ``` ## 內聯按鈕 默認情況下，按鈕占滿整個屏幕寬度。如果你想要一個僅是與內容一樣寬的按鈕，或者如果您想要并排顯示兩個或多個按鈕，請添加 data-inline="true"： ## 實例 ``` <a href="#pagetwo" data-role="button" data-inline="true">訪問第二個頁面</a> ``` ## 組合按鈕 jQuery Mobile 提供了一個簡單的方法來將按鈕組合在一起。 請把 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 一起使用來規定是否水平或垂直組合按鈕： ## 實例 ``` <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> ``` >  > 默認情況下，組合按鈕是垂直組合，它們之間沒有外邊距和空間。并且只有第一個和最后一個按鈕是圓角，以便它們組合在一起的時候創建一個漂亮的外觀。 ## 后退按鈕 如需創建后退按鈕，請使用 data-rel="back" 屬性（這會忽略錨的 href 值）： ## 實例 ``` <a href="#" data-role="button" data-rel="back">返回</a> ``` ## 更多用于按鈕的 data-* 屬性 | 屬性 | 值 | 描述 | 實例 | | --- | --- | --- | --- | | data-corners | true &#124; false | 規定按鈕是否圓角 | | data-mini | true &#124; false | 規定按鈕是否更小 | | data-shadow | true &#124; false | 規定按鈕是否有陰影 | 如需查看所有 jQuery Mobile data-* 屬性的完整參考手冊，請訪問我們的 [jQuery Mobile Data 屬性參考手冊](jquerymobile-ref-data.html)。 下一章演示如何附加圖標到您的按鈕上。