jQuery Mobile 基础(第三章)

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>