jQuery Mobile 按鈕

Mobile 應用程式是建立在您想要顯示的簡單的點選事物上。



在 jQuery Mobile 中建立按鈕

在 jQuery Mobile 中，按鈕可通過三種方式建立：

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用帶有 data-role="button" 的 <a> 元素

<button>

<button>按鈕</button>

嘗試一下 ?

<input>

<input type="button" value="https://www.itread01.com/jquerymobile/按鈕">

嘗試一下 ?

<a>

<a href="https://www.itread01.com/jquerymobile/#" data-role="button">按鈕</a>

嘗試一下 ?

在 jQuery Mobile 中，按鈕會自動樣式化，讓它們在移動裝置上更具吸引力和可用性。我們推薦您使用帶有 data-role="button" 的 <a> 元素在頁面間進行連結，使用 <input> 或 <button> 元素進行表單提交。

導航按鈕

如需通過按鈕在頁面間進行連結，請使用帶有 data-role="button" 屬性的 <a> 元素：

例項

<a href="https://www.itread01.com/jquerymobile/#pagetwo" data-role="button">訪問第二個頁面</a>

嘗試一下 ?

內聯按鈕

預設情況下，按鈕佔滿整個螢幕寬度。如果你想要一個僅是與內容一樣寬的按鈕，或者如果您想要並排顯示兩個或多個按鈕，請新增 data-inline="true"：

例項

<a href="https://www.itread01.com/jquerymobile/#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="https://www.itread01.com/jquerymobile/#anylink" data-role="button">按鈕 1</a>
<a href="https://www.itread01.com/jquerymobile/#anylink" data-role="button">按鈕 2</a>
<a href="https://www.itread01.com/jquerymobile/#anylink" data-role="button">按鈕 3</a>
</div>

嘗試一下 ?

預設情況下，組合按鈕是垂直組合，它們之間沒有外邊距和空間。並且只有第一個和最後一個按鈕是圓角，以便它們組合在一起的時候建立一個漂亮的外觀。

後退按鈕

如需建立後退按鈕，請使用 data-rel="back" 屬性（這會忽略錨的 href 值）：

例項

<a href="https://www.itread01.com/jquerymobile/#" data-role="button" data-rel="back">返回</a>

嘗試一下 ?

更多連結按鈕例項

類 描述 例項
ui-btn-b 修改按鈕顏色為黑色，字型為白色(預設為灰色背景，黑色字型)。 嘗試一下
ui-corner-all 為按鈕新增圓角 嘗試一下
ui-mini 製作小按鈕 嘗試一下
ui-shadow 為按鈕新增陰影 嘗試一下

Note 如果你需要使用更多的樣式，每個樣式類使用空格隔開，如： class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

預設情況下 <input> 按鈕有圓角及陰影效果。 <a> 和 <button> 元素沒有。

更完整的CSS類，請檢視我們的 jQuery Mobile CSS 類參考手冊。

下一章演示如何在按鈕上加上圖示。