jQuery Mobile 會(huì)自動(dòng)為 HTML 表單自動(dòng)添加樣式,讓它們看起來更具吸引力,觸摸起來更具友好性。
jQuery Mobile 表單結(jié)構(gòu)
jQuery Mobile 使用 CSS 為 HTML 表單元素添加樣式,讓它們更具吸引力,更易于使用。
在 jQuery Mobile 中,您可以使用下列表單控件:
文本輸入框
搜索輸入框
單選按鈕
復(fù)選框
選擇菜單
滑動(dòng)條
翻轉(zhuǎn)撥動(dòng)開關(guān)
當(dāng)使用 jQuery Mobile 表單時(shí),您應(yīng)當(dāng)知道:
<form> 元素必須有一個(gè) method 和一個(gè) action 屬性
每個(gè)表單元素必須有一個(gè)唯一的 "id" 屬性。id 必須是整個(gè)站點(diǎn)所有頁面上唯一的。這是因?yàn)?jQuery Mobile 的單頁導(dǎo)航機(jī)制使得多個(gè)不同頁面在同一時(shí)間被呈現(xiàn)
每個(gè)表單元素必須有一個(gè)標(biāo)簽。設(shè)置標(biāo)簽的 for 屬性來匹配元素的 id
實(shí)例
<form method="post" action="demoform.html"> <label for="fname">姓名:</label> <input type="text" name="fname" id="fname"> </form>
如需隱藏標(biāo)簽,請(qǐng)使用 class ui-hidden-accessible。這在您把元素的 placeholder 屬性作為標(biāo)簽時(shí)經(jīng)常用到:
實(shí)例
<form method="post" action="demoform.html"> <label for="fname" class="ui-hidden-accessible">姓名:</label> <input type="text" name="fname" id="fname" placeholder="姓名..."> </form>
提示: 我們可以使用 data-clear-btn="true" 屬性來添加清除輸入框內(nèi)容的按鈕 (一個(gè)在輸入框右側(cè)的 X 圖標(biāo)):
實(shí)例
<label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-clear-btn="true">
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
![]() | 清除輸入框的按鈕可以在 <input> 元素中使用,但不能在 <textarea> 中使用。 搜索框中 data-clear-btn 默認(rèn)值為 "true" ,你可以使用 data-clear-btn="false" 移除該圖標(biāo)。 |
---|
jQuery Mobile 表單圖標(biāo)
表單中的按鈕代碼是標(biāo)準(zhǔn)的 HTML <input> 元素 (button, reset, submit)。他們會(huì)自動(dòng)渲染樣式,可以自動(dòng)適配移動(dòng)設(shè)備與桌面設(shè)備:
實(shí)例
<input type="button" value="按鈕"> <input type="reset" value="重置按鈕"> <input type="submit" value="提交按鈕">
如果需要在 <input> 按鈕中添加額外的樣式,可以使用下表中的 data-* 屬性:
屬性 | 值 | 描述 |
---|---|---|
data-corners | true | false | 指定按鈕是否有圓角 |
data-icon | 圖標(biāo)參考手冊(cè) | 指定按鈕圖標(biāo) |
data-iconpos | left | right | top | bottom | notext | 指定圖標(biāo)位置 |
data-inline | true | false | 指定是否內(nèi)聯(lián)按鈕 |
data-mini | true | false | 指定是否為迷你按鈕 |
data-shadow | true | false | 指定按鈕是否添加陰影效果 |
按鈕添加圖標(biāo):
實(shí)例
<input type="button" value="按鈕"> <input type="reset" value="重置按鈕"> <input type="submit" value="提交按鈕">
字段容器
如需讓標(biāo)簽和表單元素看起來更適應(yīng)寬屏,請(qǐng)用帶有 "ui-field-contain" 類的 <div> 或 <fieldset> 元素包圍 label/form 元素:
實(shí)例
<form method="post" action="demoform.php"> <div class="ui-field-contain"> <label for="fname">姓:</label> <input type="text" name="fname" id="fname"> <label for="lname">姓:</label> <input type="text" name="lname" id="lname"> </div> </form>
ui-field-contain 類基于頁面的寬度為標(biāo)簽和表單控件添加樣式。當(dāng)頁面的寬度大于 480px 時(shí),它會(huì)自動(dòng)把標(biāo)簽放置在與表單控件同一線上。當(dāng)頁面的寬度小于 480px 時(shí),標(biāo)簽會(huì)被放置在表單元素的上面。 |
提示:為了防止 jQuery Mobile 為可點(diǎn)擊元素自動(dòng)添加樣式,請(qǐng)使用 data-role="none" 屬性:
實(shí)例
<label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-role="none">
![]() | jQuery Mobile 中的表單提交 jQuery Mobile 通過 AJAX 自動(dòng)處理表單提交,并將試圖集成服務(wù)器響應(yīng)到應(yīng)用程序的 DOM 中。 |
---|