- 相關(guān)推薦
jQueryMobile表單結(jié)構(gòu)學(xué)習(xí)
jQuery Mobile 表單 jQuery Mobile 會(huì)自動(dòng)為 HTML 表單添加優(yōu)異的便于觸控的外觀。 jQueryMobile 使用 CSS 來(lái)設(shè)置 HTML 表單元素的樣式,以使其更有吸引力更易用。下面,小編為大家搜索整理了jQueryMobile表單結(jié)構(gòu)學(xué)習(xí),希望能給大家?guī)?lái)幫助!更多精彩內(nèi)容請(qǐng)及時(shí)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
jQuery Mobile 表單結(jié)構(gòu)
jQuery Mobile 使用 CSS 來(lái)設(shè)置 HTML 表單元素的樣式,以使其更有吸引力更易用。
在 jQuery Mobile 中,您可以使用以下表單控件:
文本框
搜索框
單選框
復(fù)選框
選擇菜單
滑動(dòng)條
翻轉(zhuǎn)切換開關(guān)
當(dāng)您與 jQuery Mobile 表單打交道時(shí),應(yīng)該了解以下信息:
元素必須設(shè)置 method 和 action 屬性
每個(gè)表單元素必須設(shè)置唯一的 "id" 屬性。該 id 在站點(diǎn)的頁(yè)面中必須是唯一的。這是因?yàn)?jQuery Mobile 的單頁(yè)面導(dǎo)航模型允許許多不同的“頁(yè)面”同時(shí)呈現(xiàn)。
每個(gè)表單元素必須有一個(gè)標(biāo)記(label)。請(qǐng)?jiān)O(shè)置 label 的 for 屬性來(lái)匹配元素的 id。
實(shí)例
method="post" action="demoform.asp">
for="fname">First name:
id="fname">
親自試一試
如需隱藏 label,請(qǐng)使用類 ui-hidden-accessible。這很常用,當(dāng)您需要元素的 placeholder 屬性充當(dāng) label 時(shí):
實(shí)例
class="ui-hidden-accessible">姓名:
親自試一試域容器
如果需要 label 和表單元素在寬屏幕上顯示正常,請(qǐng)用帶有 data-role="fieldcontain" 屬性的
或元素來(lái)包裝 label 或表單元素:
實(shí)例
First name:
Last name:
親自試一試
提示:fieldcontain 屬性基于頁(yè)面寬度來(lái)設(shè)置 label 和表單控件的樣式。當(dāng)頁(yè)面寬度大于 480px 時(shí),它會(huì)自動(dòng)將 label 與表單控件放置于同一行。當(dāng)小于 480px 時(shí),label 會(huì)被放置于表單元素之上。
提示:如需避免 jQuery Mobile 自動(dòng)為可點(diǎn)擊元素設(shè)置樣式,請(qǐng)使用 data-role="none" 屬性:
實(shí)例
First name:
data-role="none">
親自試一試
在 jQuery Mobile 中提交表單
提示:jQuery Mobile 會(huì)自動(dòng)通過 AJAX 進(jìn)行表單提交,并會(huì)嘗試將服務(wù)器響應(yīng)整合入應(yīng)用程序的 DOM 中。
【jQueryMobile表單結(jié)構(gòu)學(xué)習(xí)】相關(guān)文章:
jQueryMobile頁(yè)面09-18
PHP中的表單處理09-19
PHP 表單驗(yàn)證方法11-01
JavaScript重置表單的實(shí)現(xiàn)09-23
PHP如何獲取表單07-27
常用表單驗(yàn)證的js方法11-12
如何讓php提交form表單11-06
PHP提交from表單的方法07-05