jQuery Mobile 表單

jQuery Mobile 表單

jQuery Mobile 會(huì)自動(dòng)為 HTML 表單自動(dòng)添加樣式，讓它們看起來(lái)更具吸引力，觸摸起來(lái)更具友好性。

jQuery Mobile 表單結(jié)構(gòu)

jQuery Mobile 使用 CSS 為 HTML 表單元素添加樣式，讓它們更具吸引力，更易于使用。

在 jQuery Mobile 中，您可以使用下列表單控件：

• 文本輸入框
• 搜索輸入框
• 單選按鈕
• 復(fù)選框
• 選擇菜單
• 滑動(dòng)條
• 翻轉(zhuǎn)撥動(dòng)開(kāi)關(guān)

當(dāng)使用 jQuery Mobile 表單時(shí)，您應(yīng)當(dāng)知道：

• <form> 元素必須有一個(gè) method 和一個(gè) action 屬性
• 每個(gè)表單元素必須有一個(gè)唯一的 "id" 屬性。id 必須是整個(gè)站點(diǎn)所有頁(yè)面上唯一的。這是因?yàn)?jQuery Mobile 的單頁(yè)導(dǎo)航機(jī)制使得多個(gè)不同頁(yè)面在同一時(shí)間被呈現(xiàn)
• 每個(gè)表單元素必須有一個(gè)標(biāo)簽。設(shè)置標(biāo)簽的 for 屬性來(lái)匹配元素的 id

如需隱藏標(biāo)簽，請(qǐng)使用 class ui-hidden-accessible。這在您把元素的 placeholder 屬性作為標(biāo)簽時(shí)經(jīng)常用到：

Field 容器

如需讓標(biāo)簽和表單元素看起來(lái)更適應(yīng)寬屏，請(qǐng)用帶有 data-role="fieldcontain" 屬性的 <div> 或 <fieldset> 元素包圍 label/form 元素：

	fieldcontain 屬性基于頁(yè)面的寬度為標(biāo)簽和表單控件添加樣式。當(dāng)頁(yè)面的寬度大于 480px 時(shí)，它會(huì)自動(dòng)把標(biāo)簽放置在與表單控件同一線上。當(dāng)頁(yè)面的寬度小于 480px 時(shí)，標(biāo)簽會(huì)被放置在表單元素的上面。

提示：為了防止 jQuery Mobile 為可點(diǎn)擊元素自動(dòng)添加樣式，請(qǐng)使用 data-role="none" 屬性：

	jQuery Mobile 中的表單提交 jQuery Mobile 通過(guò) AJAX 自動(dòng)處理表單提交，并將試圖集成服務(wù)器響應(yīng)到應(yīng)用程序的 DOM 中。

相關(guān)閱讀

jQuery Mobile 圖標(biāo)