按鈕和表單元素

1、表單元素和按鈕（第八講（第八講 ) )知識回顧n頁眉欄相關(guān)屬性？ n頁腳欄相關(guān)屬性？n工具欄相關(guān)屬性？n標簽欄相關(guān)屬性？教學內(nèi)容n在 jQuery Mobile 中創(chuàng)建按鈕n導航按鈕n內(nèi)聯(lián)按鈕n組合按鈕n后退按鈕njQuery Mobile按鈕圖標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 中，按鈕會自動樣式化，讓它們在移動設(shè)備上更具吸引力和可用性。 我們推薦您使用帶有我們推薦您使用帶有 data-role=button 的的 元素在頁面間進行鏈接，使用元素在頁面間進行鏈接，使用 或或 元素進行表單提交。元素進行表單提交。2.導航按鈕如需通過按鈕在頁面間進行鏈接，請使用帶有 data-role=“button” 屬性的 元素如：訪問第二個頁面請參照下邊兩個效果圖完成頁面制作：請參照下邊

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

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

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

6、obile 按鈕下面我們列出一些jQueryMobile提供的可用圖標：屬性值描述圖標實例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)定位圖標您也可以規(guī)定圖標定位在按鈕的什么部位：頂部（top）右側(cè)（right）底部（bottom）左側(cè)（left）默認情況下，所有的按鈕圖標被放置到左側(cè)默認情況下，所有的按鈕圖標被放置到左側(cè)。(2)定位圖標請使用data-iconpos屬性來指定位置。圖標的位置：圖標的位置：頂部右側(cè)底部左側(cè)(3)只顯示圖標如果只想顯示圖標，請設(shè)置data-iconpos 為為 notext：后退：后退：搜索 jQuery Mobile 表單 jQuery Mobile 會自動為 HTML 表單自動添加樣式，讓它們看起來更具吸引力，觸摸起來更具友好性。 1.jQuery Mobile 表單基礎(chǔ)表單基礎(chǔ) 2