Latest web development tutorials

jQuery Mobile 按鈕

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





在jQuery Mobile 中創建按鈕

在jQuery Mobile 中,按鈕可通過三種方式創建:

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

<button>

<button>按钮</button>

嘗試一下»

<input>

<input type="button" value="按钮">

嘗試一下»

<a>

<a href="#" data-role="button" >按钮</a>

嘗試一下»

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


導航按鈕

如需通過按鈕在頁面間進行鏈接,請使用帶有data-role="button" 屬性的<a> 元素:

實例

< 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="horizo​​ntal|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>

嘗試一下»

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


後退按鈕

如需創建後退按鈕,請使用data-rel="back" 屬性(這會忽略錨的href 值):

實例

<a href="#" 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類參考手冊

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