1、表單：

表單控件：

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

fileld容器：
如需讓標簽和表單元素看起來更適應寬屏，請用帶有 data-role="fieldcontain" 屬性的 <div> 或 <fieldset> 元素包圍 label/form 元素：

<form method="post" action="demoform.html"> <div data-role="fieldcontain"> <label for="fname">姓:</label> <input type="text" name="fname" id="fname"> <label for="lname">名:</label> <input type="text" name="lname" id="lname"> </div>> </form>

?為了防止 jQuery Mobile 為可點擊元素自動添加樣式，請使用 data-role="none" 屬性：

當用戶在有限數量的選擇中僅選取一個選項時，使用單選按鈕。

為了創建一系列單選按鈕，請添加帶有 type="radio" 的 input 以及相應的 label。把單選按鈕包圍在 <fieldset> 元素內。您也可以添加一個 <legend> 元素來定義 <fieldset> 的標題。

提示：請使用 data-role="controlgroup" 來把按鈕組合在一起：

<form method="post" action="demo_form.php"> <fieldset data-role="controlgroup"> <legend>Choose your gender:</legend> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"> </fieldset> </form>

您也可以用一個 field 容器包圍 <fieldset>：

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>請選擇您的性別:</legend> </fieldset> </div>

?

表單選擇select：

如果您有一個帶有相關選項的很長的列表，請在 <select> 內使用 <optgroup> 元素：

?

<select name="day" id="day"> <optgroup label="Weekdays"> <option value="mon">Monday</option> <option value="tue">Tuesday</option> <option value="wed">Wednesday</option> </optgroup> <optgroup label="Weekends"> <option value="sat">Saturday</option> <option value="sun">Sunday</option> </optgroup> </select>

如果您想要讓選擇菜單在所有的移動設備上都顯示相同，請使用 jQuery 自帶的自定義選擇菜單，data-native-menu="false" 屬性：

如需在選擇菜單中選擇多個選項，請在 <select> 元素中使用 multiple 屬性：

<select name="day" id="day" multiple data-native-menu="false">

?

?表單滑動條：

如果您想要高亮突出顯示滑動條的值，請添加 data-highlight="true"：

<input type="range" name="points" id="points" value="50" min="0" max="100" data-hightlight="true">

?

波動開關：

如需創建一個開關，請把 <select> 元素與 data-role="slider" 一起使用，并添加兩個 <option> 元素：

請使用 "selected" 屬性來設置選項中的一個為預選中狀態（高亮突出顯示狀態）

<form method="post" action="demoform.html"> <div data-role="fieldcontain"> <label for="switch">Toggle Switch:</label> <select name="switch" id="switch" data-role="slider"> <option value="on">On</option> <option value="off" selected>Off</option> </select> </div> </form>

?

轉載于:https://www.cnblogs.com/xibei666/p/4454169.html

總結

以上是生活随笔為你收集整理的jQuery Mobile 基础(第三章)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。