按鈕和表單元素

表單元素和按鈕（第八講)知識回顧頁眉欄相關(guān)屬性？頁腳欄相關(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中，按鈕可通過三種方式創(chuàng)建：使用<button>元素使用<input>元素使用帶有data-role="button"的<a>元素

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

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

data-role="button">按鈕</a>請參照下邊效果圖完成頁面制作：

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

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

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

data-inline="true">訪問第二個頁面</a>

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

效果圖1效果圖24.組合按鈕jQueryMobile提供了一個簡單的方法來將按鈕組合在一起。

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

4.組合按鈕

實例<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.組合按鈕請參照下邊兩個效果圖完成頁面制作：

data-role="controlgroup"

data-type="horizontal|vertical“實例：<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)建后退按鈕，請使用data-rel="back"屬性（這會忽略錨的href值）：實例<ahref="#"data-role="button"

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

5.后退按鈕請參照下邊兩個效果圖完成頁面制作：

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

按鈕圖標(biāo)jQueryMobile提供了一套讓按鈕看起來更稱心如意的圖標(biāo)。(1)添加圖標(biāo)到j(luò)QueryMobile按鈕如需添加圖標(biāo)到您的按鈕，請使用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)實例data-icon="arrow-l"左箭頭嘗試一下data-icon="arrow-r"右箭頭嘗試一下data-icon="delete"刪除嘗試一下data-icon="info"信息嘗試一下data-icon="home"首頁嘗試一下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)請使用data-iconpos屬性來指定位置。圖標(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)，請設(shè)置data-iconpos為"notext"：后退：<ahref="#link"data-role="button"data-icon="search"

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

jQueryMobile會自動為HTM