最新的Web開發教程
 

jQuery Mobile表單


jQuery Mobile的自動式的HTML表單,使它們看起來引人入勝和觸摸友好。



jQuery Mobile Form結構

jQuery Mobile的使用CSS樣式的HTML表單元素,使得他們有吸引力和易於使用。

在jQuery Mobile的,你可以用下面的表單控件:

  • 文本輸入框
  • 搜索輸入
  • 單選按鈕
  • 複選框
  • 選擇菜單
  • 滑塊
  • 翻轉撥動開關

當使用jQuery Mobile的形式工作,你應該知道:

  • <form>元素必須具有一種方法和action屬性
  • 每個表單元素必須有一個獨特的“id”屬性。 該ID必須在整個站點的網頁的唯一。 這是因為jQuery Mobile的單頁導航模型允許許多不同的“頁面”是存在在同一時間
  • 每個表單元素必須有標籤。 設置標籤的屬性相匹配的元素的id

<form method="post" action="demoform.asp" >
  <label for="fname"> First name: </label>
  <input type="text" name="fname" id="fname" >
</form>
試一試»

提示:使用佔位符來指定一個描述輸入字段的預期值短的提示:

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name..." >
試一試»

提示:要隱藏的標籤,使用"ui-hidden-accessible"類。 這是經常使用,當你想要的元素的佔位符屬性作為標籤:

<label for="fname" class="ui-hidden-accessible" ">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name..." >
試一試»

提示:如果你想有一個"clear button" (上清除字段的內容輸入欄右側的X圖標),添加數據明確BTN =“true”屬性:

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true" >
試一試»

"clear button"可在任何可以添加<input>元素,除了<textarea> 。 搜索領域有此屬性設置為"true"為默認-去改變它,只需指定data-clear-btn="false"


jQuery Mobile的表單按鈕

在表單按鈕編碼標準的HTML <input>元素(按鈕,重置,提交)。 它們會自動樣式,使它們有吸引力的和容易使用的移動設備和桌面計算機上:

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
試一試»

以另外一種樣式<輸入>按鈕,請使用下表中列出的數據 - *屬性:

粗體數值表示默認值。

屬性 描述
data-corners true | false 指定按鈕是否應該具有圓角或不
data-icon Icons Reference 指定按鈕的圖標
data-iconpos left | right | top | bottom | notext 指定圖標的位置
data-inlinetrue | false 指定按鈕是否應為內聯與否
data-minitrue | false 指定按鈕是否應該是小的或不
data-shadow true | false 指定按鈕是否應該有陰影或不

包含或排除你想/不想屬性(S):

<input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true">
試一試»

Field Containers

為了使標籤和表單元素正確看待更寬的屏幕,一個包裝<div><fieldset>元素的"ui-field-contain"標籤/表單元素周圍類:

<form method="post" action="demoform.asp">
  <div class="ui-field-contain" >
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>
試一試»

"ui-field-contain"根據頁面的寬度類樣式標籤和表單控件。 當頁面的寬度比480像素時,它自動將標籤上的同一行的形式控制。 當小於480像素,標籤將被放置在表單元素之上。

提示:要防止jQuery Mobile的自動風格tappable /點擊元素,使用data-role="none"屬性:

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none" >
試一試»

表單提交jQuery中移動

jQuery Mobile的將通過AJAX自動處理表單提交,並試圖整合服務器響應到應用程序的DOM。