jQuery Mobile 按鈕
jQuery Mobile 按鈕
Mobile 應用程序是建立在您想要顯示的簡單的點擊事物上。
在 jQuery Mobile 中創建按鈕
在 jQuery Mobile 中,按鈕可通過三種方式創建:
- 使用 <button> 元素
- 使用 <input> 元素
- 使用帶有 data-role="button" 的 <a> 元素
在 jQuery Mobile 中,按鈕會自動樣式化,讓它們在移動設備上更具吸引力和可用性。我們推薦您使用帶有 data-role="button" 的 <a> 元素在頁面間進行鏈接,使用 <input> 或 <button> 元素進行表單提交。 |
導航按鈕
如需通過按鈕在頁面間進行鏈接,請使用帶有 data-role="button" 屬性的 <a> 元素:
內聯按鈕
默認情況下,按鈕佔滿整個屏幕寬度。如果你想要一個僅是與內容一樣寬的按鈕,或者如果您想要併排顯示兩個或多個按鈕,請添加 data-inline="true":
組合按鈕
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>
<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 值):
更多鏈接按鈕實例
類 | 描述 | 實例 |
---|---|---|
ui-btn-b | 修改按鈕顏色為黑色,字體為白色(默認為灰色背景,黑色字體)。 | 嘗試一下 |
ui-corner-all | 為按鈕添加圓角 | 嘗試一下 |
ui-mini | 製作小按鈕 | 嘗試一下 |
ui-shadow | 為按鈕添加陰影 | 嘗試一下 |
如果你需要使用更多的樣式,每個樣式類使用空格隔開,如: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" 默認情況下 <input> 按鈕有圓角及陰影傚果。 <a> 和 <button> 元素沒有。 |
更完整的CSS類,請查看我們的 jQuery Mobile CSS 類參考手冊。
下一章演示如何在按鈕上加上圖標。