当在jqm框架中实现表单提交时，一般会使用ajax异步提交处理，并在表单页和结果页之间创建一个平滑的过渡效果。
为确保表单正常提交，建议form元素一定要定义action和method属性，method属性允许使用get和post两种方式来提交表单。
<article data-role="content">
<form method="post">
<label for="name">name:</label>
<input type="text" name="name" id="name" value="" />
<label for="passwd">password:</label>
<input type="password" name="passwd" id="passwd" value="" />
<label for="tel">tel:</label>
<input type="tel" name="tel" id="tel" value="" />
<label for="search">搜索</label>
<input type="search" name="search" id="search" value="" />
<input type="button" name="sumbit" id="submit" value="提交">
</form>
</article>
Paste_Image.png
上例中当type为search类型时，自动在文本框前加放大镜图像
- slider类型
jqm允许添加一个range类型的范围选择型控件，该类型可通过value、min、max等属性来定义可选择范围及初始默认值
<label for="slider">分数</label>
<input type="range" name="slider" id="slider" value="20" min="0" max="100" />
Paste_Image.png
- select 元素结合slider类型实现开关功能效果的toggle switches组件
<label for="slider">切换</label>
<select name="slider" id="slider" data-role="slider" />
<option value="off">关闭</option>
<option value="on">开启</option>
</select>
Paste_Image.png
Paste_Image.png
- 单选按钮
创建单选按钮步骤：- 为input元素定义type类型为radio，把label元素的for属性设置为input元素的id属性一样；
- 按键组中label元素用于显示选项的文本内容；推荐把一组单选按钮元素放在fieldset元素内，同事定义legend元素表示单选按钮组的名称；
-
设置fieldset元素的data-role为controlgroup，表示钙元素内饰一组单选按钮。
<fieldset data-role="controlgroup">
<legend>请选择您的年龄范围：</legend>
<input type="radio" name="age" id="radio1" value="any" checked>
<label for="radio1">不限</label>
<input type="radio" name="age" id="radio2" value="16-22">
<label for="radio2">16-22岁</label>
<input type="radio" name="age" id="radio3" value="23-30">
<label for="radio3">23-30岁</label>
<input type="radio" name="age" id="radio4" value="31-45">
<label for="radio4">31-45岁</label>
<input type="radio" name="age" id="radio5" value="45">
<label for="radio5">大于45岁</label>
</fieldset>
Paste_Image.png
fieldset里设置data-type属性值为horizontal 水平排列单选按钮
Paste_Image.png
- 复选框类型
jqm中单选和复选框在语法方面是相同的，唯一不同的是input元素的属性是checkbox；
Paste_Image.png
- 下拉选择菜单
创建下拉菜单的步骤：-
定义select元素以及option元素列表，设置label元素的for属性为select元素的id属性
-
定义label元素的文本内容作为选项的名称
-
定义div元素并设置data-role属性为fieldcontain，并把select元素、label元素嵌套在该div内。
<div data-role="fieldcontain"> <label for="level">最高学历：</label> <select name="level" id="level"> <option value="0">小学毕业</option> <option value="1">初中毕业</option> <option value="2">高中毕业</option> <option value="3">大学专科</option> <option value="4">大学本科</option> <option value="5">硕士及以上</option> </select> </div>
-
Paste_Image.png
- 数据项分组的选择菜单
在select元素中指定optgroup元素并设置其label属性，jqm会创建一个分割符的分组标题，label属性就是该分割符的标题文本。
<div data-role="fieldcontain">
<label for="level">最高学历：</label>
<select name="level" id="level">
<optgroup label="分组1"></optgroup>
<option value="0">小学毕业</option>
<option value="1">初中毕业</option>
<option value="2">高中毕业</option>
<optgroup label="分组2"></optgroup>
<option value="3">大学专科</option>
<option value="4">大学本科</option>
<option value="5">硕士及以上</option>
</select>
</div>
Paste_Image.png
- 禁用option的某个选项：disabled
<option value="1" disabled>初中毕业</option> - 允许多选的菜单选项：multiple
<select name="level" id="level" multiple>
Paste_Image.png
- <select name="level" id="level" data-native-menu="false" multiple>
data-native-menu="false" 表示采用jqm自定义的选择窗口，默认是true使用平台内置选择器，为false时，选择窗口左上方会有关闭按钮
Paste_Image.png
- option占位符
<div data-role="fieldcontain">
<label for="level" class="select">最高学历：</label>
<select name="level" id="level" data-native-menu="false">
<option value="" data-placeholder="true">请选择</option>
<option value="0">小学毕业</option>
<option value="1">初中毕业</option>
<option value="2">高中毕业</option>
<option value="3">大学专科</option>
<option value="4">大学本科</option>
<option value="5">硕士及以上</option>
</select>
</div>
Paste_Image.png
- 更多data属性
<div data-role="fieldcontain">
<label for="operation" class="select">操作：</label>
<select name="operation" id="operation" data-native-menu="false" data-icon="gear" data-inline="true">
<option value="" data-placeholder="true">请选择</option>
<option value="0">编辑用户</option>
<option value="1">删除用户</option>
</select>
</div>
Paste_Image.png
网友评论