jQuery Mobile 中建立按鈕

在 jQuery Mobile 中建立按鈕

jQuery Mobile 中的按鈕可經過三種方法建立：

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

<button>

<button>按鈕</button>

<input>

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

<a>

<a href="#" >按鈕</a>

data-role="button"

提示：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="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-* 屬性