?
This document uses PHP Chinese website manual Release
Mobile 應(yīng)用程序是建立在您想要顯示的簡(jiǎn)單的點(diǎn)擊事物上。
在 jQuery Mobile 中,按鈕可通過(guò)三種方式創(chuàng)建:
效果預(yù)覽 ?<button>按鈕</button>
效果預(yù)覽 ?<input type="button" value="按鈕">
效果預(yù)覽 ?<a href="#" data-role="button">按鈕</a>
在 jQuery Mobile 中,按鈕會(huì)自動(dòng)樣式化,讓它們?cè)谝苿?dòng)設(shè)備上更具吸引力和可用性。我們推薦您使用帶有 data-role="button" 的 <a> 元素在頁(yè)面間進(jìn)行鏈接,使用 <input> 或 <button> 元素進(jìn)行表單提交。 |
如需通過(guò)按鈕在頁(yè)面間進(jìn)行鏈接,請(qǐng)使用帶有 data-role="button" 屬性的 <a> 元素:
效果預(yù)覽 ?<a href="#pagetwo" data-role="button">訪問(wèn)第二個(gè)頁(yè)面</a>
默認(rèn)情況下,按鈕占滿(mǎn)整個(gè)屏幕寬度。如果你想要一個(gè)僅是與內(nèi)容一樣寬的按鈕,或者如果您想要并排顯示兩個(gè)或多個(gè)按鈕,請(qǐng)?zhí)砑?data-inline="true":
效果預(yù)覽 ?<a href="#pagetwo" data-role="button" data-inline="true">訪問(wèn)第二個(gè)頁(yè)面</a>
jQuery Mobile 提供了一個(gè)簡(jiǎn)單的方法來(lái)將按鈕組合在一起。
請(qǐng)把 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 一起使用來(lái)規(guī)定是否水平或垂直組合按鈕:
效果預(yù)覽 ?<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>
默認(rèn)情況下,組合按鈕是垂直組合,它們之間沒(méi)有外邊距和空間。并且只有第一個(gè)和最后一個(gè)按鈕是圓角,以便它們組合在一起的時(shí)候創(chuàng)建一個(gè)漂亮的外觀。 |
如需創(chuàng)建后退按鈕,請(qǐng)使用 data-rel="back" 屬性(這會(huì)忽略錨的 href 值):
效果預(yù)覽 ?<a href="#" data-role="button" data-rel="back">返回</a>
屬性 | 值 | 描述 | 實(shí)例 |
---|---|---|---|
data-corners | true | false | 規(guī)定按鈕是否圓角 | 實(shí)例? |
data-mini | true | false | 規(guī)定按鈕是否更小 | 實(shí)例? |
data-shadow | true | false | 規(guī)定按鈕是否有陰影 | 實(shí)例? |
如需查看所有 jQuery Mobile data-* 屬性的完整參考手冊(cè),請(qǐng)?jiān)L問(wèn)我們的 jQuery Mobile Data 屬性參考手冊(cè)。
下一章演示如何附加圖標(biāo)到您的按鈕上。