按鈕和表單元素

1、表單元素和按鈕（第八講（第八講 ) )知識(shí)回顧n頁眉欄相關(guān)屬性？ n頁腳欄相關(guān)屬性？n工具欄相關(guān)屬性？n標(biāo)簽欄相關(guān)屬性？教學(xué)內(nèi)容n在 jQuery Mobile 中創(chuàng)建按鈕n導(dǎo)航按鈕n內(nèi)聯(lián)按鈕n組合按鈕n后退按鈕njQuery Mobile按鈕圖標(biāo)n表單元素1.在 jQuery Mobile 中創(chuàng)建按鈕在 jQuery Mobile 中，按鈕可通過三種方式創(chuàng)建：n 使用 元素n 使用 元素n 使用帶有 data-role=button 的 元素（1）使用 元素創(chuàng)建按鈕創(chuàng)建方法：按鈕請參照下邊效果圖完成頁面制作：請參照下邊效果圖完成頁面制作： （2）使用 元素創(chuàng)建按鈕創(chuàng)建方法：請參照下邊效果圖完

2、成頁面制作：請參照下邊效果圖完成頁面制作：（3）使用 元素創(chuàng)建按鈕創(chuàng)建方法：按鈕請參照下邊效果圖完成頁面制作：請參照下邊效果圖完成頁面制作：（3）使用 元素創(chuàng)建按鈕 在 jQuery Mobile 中，按鈕會(huì)自動(dòng)樣式化，讓它們在移動(dòng)設(shè)備上更具吸引力和可用性。 我們推薦您使用帶有我們推薦您使用帶有 data-role=button 的的 元素在頁面間進(jìn)行鏈接，使用元素在頁面間進(jìn)行鏈接，使用 或或 元素進(jìn)行表單提交。元素進(jìn)行表單提交。2.導(dǎo)航按鈕如需通過按鈕在頁面間進(jìn)行鏈接，請使用帶有 data-role=“button” 屬性的 元素如：訪問第二個(gè)頁面請參照下邊兩個(gè)效果圖完成頁面制作：請參照下邊

3、兩個(gè)效果圖完成頁面制作：效果圖1效果圖23.內(nèi)聯(lián)按鈕 默認(rèn)情況下，按鈕占滿整個(gè)屏幕寬度。如果你想要一個(gè)僅是與內(nèi)容一樣寬的按鈕，或者如果您想要并排顯示兩個(gè)或多個(gè)按鈕，請?zhí)砑?data-inline=“true”。方法如下：訪問第二個(gè)頁面3.內(nèi)聯(lián)按鈕請參照下邊兩個(gè)效果圖完成頁面制作：請參照下邊兩個(gè)效果圖完成頁面制作：效果圖1效果圖24.組合按鈕 jQuery Mobile 提供了一個(gè)簡單的方法來將按鈕組合在一起。 data-role=“controlgroup” 屬性和 data-type=“horizontal|vertical” 一起使用來規(guī)定是否水平或垂直組合按鈕。 默認(rèn)情況下，組合按鈕是垂

4、直組合，它們之間沒有外邊距和空間。并且只有第一個(gè)和最后一個(gè)按鈕是圓角，以便它們組合在一起的時(shí)候創(chuàng)建一個(gè)漂亮的外觀。4.組合按鈕實(shí)例實(shí)例按鈕 1按鈕 2按鈕 34.組合按鈕請參照下邊兩個(gè)效果圖完成頁面制作：請參照下邊兩個(gè)效果圖完成頁面制作：data-role=controlgroupdata-type=horizontal|vertical“實(shí)例：按鈕1按鈕2按鈕35.后退按鈕 如需創(chuàng)建后退按鈕，請使用 data-rel=back 屬性（這會(huì)忽略錨的 href 值）：實(shí)例實(shí)例返回5.后退按鈕請參照下邊兩個(gè)效果圖完成頁面制作：請參照下邊兩個(gè)效果圖完成頁面制作：5.后退按鈕屬性值描述實(shí)例data-c

5、ornerstrue|false規(guī)定按鈕是否圓角嘗試一下data-minitrue|false規(guī)定按鈕是否更小嘗試一下data-shadowtrue|false規(guī)定按鈕是否有陰影 嘗試一下更多用于按鈕的 data-* 屬性data-cornersdata-minidata-shadow6.jQuery Mobile按鈕圖標(biāo)jQueryMobile提供了一套讓按鈕看起來更稱心如意的圖標(biāo)。(1)添加圖標(biāo)到 jQuery Mobile 按鈕如需添加圖標(biāo)到您的按鈕，請使用data-icon屬性。如：Search提示：提示：您也可以在或元素上使用data-icon屬性。(1)添加圖標(biāo)到 jQuery M

6、obile 按鈕下面我們列出一些jQueryMobile提供的可用圖標(biāo)：屬性值描述圖標(biāo)實(shí)例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è)默認(rèn)情況下，所有的按鈕圖標(biāo)被放置到左側(cè)。(2)定位圖標(biāo)請使用data-iconpos屬性來指定位置。圖標(biāo)的位置：圖標(biāo)的位置：頂部右側(cè)底部左側(cè)(3)只顯示圖標(biāo)如果只想顯示圖標(biāo)，請?jiān)O(shè)置data-iconpos 為為 notext：后退：后退：搜索 jQuery Mobile 表單 jQuery Mobile 會(huì)自動(dòng)為 HTML 表單自動(dòng)添加樣式，讓它們看起來更具吸引力，觸摸起來更具友好性。 1.jQuery Mobile 表單基礎(chǔ)表單基礎(chǔ) 2