按鈕和表單元素

表單元素和按鈕（第八講)知識(shí)回顧頁(yè)眉欄相關(guān)屬性？頁(yè)腳欄相關(guān)屬性？工具欄相關(guān)屬性？標(biāo)簽欄相關(guān)屬性？教學(xué)內(nèi)容在jQueryMobile中創(chuàng)建按鈕導(dǎo)航按鈕內(nèi)聯(lián)按鈕組合按鈕后退按鈕jQueryMobile

按鈕圖標(biāo)表單元素

1.在jQueryMobile中創(chuàng)建按鈕在jQueryMobile中，按鈕可通過(guò)三種方式創(chuàng)建：使用<button>元素使用<input>元素使用帶有data-role="button"的<a>元素

（1）使用<button>元素創(chuàng)建按鈕創(chuàng)建方法：<button>按鈕</button>請(qǐng)參照下邊效果圖完成頁(yè)面制作：（2）使用<input>元素創(chuàng)建按鈕創(chuàng)建方法：<inputtype="button"value="按鈕">請(qǐng)參照下邊效果圖完成頁(yè)面制作：

（3）使用<a>元素創(chuàng)建按鈕創(chuàng)建方法：<ahref="#"

data-role="button">按鈕</a>請(qǐng)參照下邊效果圖完成頁(yè)面制作：

（3）使用<a>元素創(chuàng)建按鈕在jQueryMobile中，按鈕會(huì)自動(dòng)樣式化，讓它們?cè)谝苿?dòng)設(shè)備上更具吸引力和可用性。

我們推薦您使用帶有data-role="button"的<a>元素在頁(yè)面間進(jìn)行鏈接，使用<input>或<button>元素進(jìn)行表單提交。2.導(dǎo)航按鈕如需通過(guò)按鈕在頁(yè)面間進(jìn)行鏈接，請(qǐng)使用帶有data-role=“button”屬性的<a>元素如：<ahref="#pagetwo"data-role="button">訪問(wèn)第二個(gè)頁(yè)面</a>請(qǐng)參照下邊兩個(gè)效果圖完成頁(yè)面制作：

效果圖1效果圖23.內(nèi)聯(lián)按鈕默認(rèn)情況下，按鈕占滿整個(gè)屏幕寬度。如果你想要一個(gè)僅是與內(nèi)容一樣寬的按鈕，或者如果您想要并排顯示兩個(gè)或多個(gè)按鈕，請(qǐng)?zhí)砑觗ata-inline=“true”。方法如下：<ahref="#pagetwo"data-role="button"

data-inline="true">訪問(wèn)第二個(gè)頁(yè)面</a>

3.內(nèi)聯(lián)按鈕請(qǐng)參照下邊兩個(gè)效果圖完成頁(yè)面制作：

效果圖1效果圖24.組合按鈕jQueryMobile提供了一個(gè)簡(jiǎn)單的方法來(lái)將按鈕組合在一起。

data-role=“controlgroup”屬性和data-type=“horizontal|vertical”一起使用來(lái)規(guī)定是否水平或垂直組合按鈕。默認(rèn)情況下，組合按鈕是垂直組合，它們之間沒(méi)有外邊距和空間。并且只有第一個(gè)和最后一個(gè)按鈕是圓角，以便它們組合在一起的時(shí)候創(chuàng)建一個(gè)漂亮的外觀。

4.組合按鈕

實(shí)例<div

data-role="controlgroup"data-type="horizontal">

<ahref="#anylink"data-role="button">按鈕1</a>

<ahref="#anylink"data-role="button">按鈕2</a>

<ahref="#anylink"data-role="button">按鈕3</a>

</div>4.組合按鈕請(qǐng)參照下邊兩個(gè)效果圖完成頁(yè)面制作：

data-role="controlgroup"

data-type="horizontal|vertical“實(shí)例：<div

data-role="controlgroup"data-type="horizontal">

<ahref="#anylink"data-role="button">按鈕1</a>

<ahref="#anylink"data-role="button">按鈕2</a>

<ahref="#anylink"data-role="button">按鈕3</a>

</div>5.后退按鈕如需創(chuàng)建后退按鈕，請(qǐng)使用data-rel="back"屬性（這會(huì)忽略錨的href值）：實(shí)例<ahref="#"data-role="button"

data-rel="back">返回</a>

5.后退按鈕請(qǐng)參照下邊兩個(gè)效果圖完成頁(yè)面制作：

5.后退按鈕屬性值描述實(shí)例data-cornerstrue|false規(guī)定按鈕是否圓角嘗試一下data-minitrue|false規(guī)定按鈕是否更小嘗試一下data-shadowtrue|false規(guī)定按鈕是否有陰影嘗試一下更多用于按鈕的data-*屬性data-cornersdata-minidata-shadow6.jQueryMobile

按鈕圖標(biāo)jQueryMobile提供了一套讓按鈕看起來(lái)更稱心如意的圖標(biāo)。(1)添加圖標(biāo)到j(luò)QueryMobile按鈕如需添加圖標(biāo)到您的按鈕，請(qǐng)使用data-icon屬性。如：<ahref="#anylink"data-role="button"

data-icon="search">Search</a>提示：您也可以在<button>或<input>元素上使用data-icon屬性。(1)添加圖標(biāo)到j(luò)QueryMobile按鈕下面我們列出一些jQueryMobile提供的可用圖標(biāo)：屬性值描述圖標(biāo)實(shí)例data-icon="arrow-l"左箭頭嘗試一下data-icon="arrow-r"右箭頭嘗試一下data-icon="delete"刪除嘗試一下data-icon="info"信息嘗試一下data-icon="home"首頁(yè)嘗試一下data-icon="back"后退嘗試一下data-icon="search"搜索嘗試一下data-icon="grid"網(wǎng)格嘗試一下(2)定位圖標(biāo)您也可以規(guī)定圖標(biāo)定位在按鈕的什么部位：

頂部（top）右側(cè)（right）底部（bottom）

左側(cè)（left）

默認(rèn)情況下，所有的按鈕圖標(biāo)被放置到左側(cè)。(2)定位圖標(biāo)請(qǐng)使用data-iconpos屬性來(lái)指定位置。圖標(biāo)的位置：<ahref="#link"data-role="button"data-icon="search"

data-iconpos="top">頂部</a>

<ahref="#link"data-role="button"data-icon="search"

data-iconpos="right">右側(cè)</a>

<ahref="#link"data-role="button"data-icon="search"

data-iconpos="bottom">底部</a>

<ahref="#link"data-role="button"data-icon="search"

data-iconpos="left">左側(cè)</a>(3)只顯示圖標(biāo)如果只想顯示圖標(biāo)，請(qǐng)?jiān)O(shè)置data-iconpos為"notext"：后退：<ahref="#link"data-role="button"data-icon="search"

data-iconpos="notext">搜索</a>jQueryMobile表單

jQueryMobile會(huì)自動(dòng)為HTM