jquery mobile ajax form,JQueryMobile入门3-Form表单

当在jqm框架中实现表单提交时，一般会使用ajax异步提交处理，并在表单页和结果页之间创建一个平滑的过渡效果。

为确保表单正常提交，建议form元素一定要定义action和method属性，method属性允许使用get和post两种方式来提交表单。

name:

password:

tel:

搜索

Paste_Image.png

上例中当type为search类型时，自动在文本框前加放大镜图像

slider类型

jqm允许添加一个range类型的范围选择型控件，该类型可通过value、min、max等属性来定义可选择范围及初始默认值

分数

Paste_Image.png

select 元素结合slider类型实现开关功能效果的toggle switches组件

切换

关闭

开启

Paste_Image.png

Paste_Image.png

单选按钮

创建单选按钮步骤：

为input元素定义type类型为radio，把label元素的for属性设置为input元素的id属性一样；

按键组中label元素用于显示选项的文本内容；推荐把一组单选按钮元素放在fieldset元素内，同事定义legend元素表示单选按钮组的名称；

设置fieldset元素的data-role为controlgroup，表示钙元素内饰一组单选按钮。

请选择您的年龄范围：

不限

16-22岁

23-30岁

31-45岁

大于45岁

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内。

最高学历：

小学毕业

初中毕业

高中毕业

大学专科

大学本科

硕士及以上

Paste_Image.png

数据项分组的选择菜单

在select元素中指定optgroup元素并设置其label属性，jqm会创建一个分割符的分组标题，label属性就是该分割符的标题文本。

最高学历：

小学毕业

初中毕业

高中毕业

大学专科

大学本科

硕士及以上

Paste_Image.png

禁用option的某个选项：disabled

初中毕业

允许多选的菜单选项：multiple

Paste_Image.png

data-native-menu="false" 表示采用jqm自定义的选择窗口，默认是true使用平台内置选择器，为false时，选择窗口左上方会有关闭按钮

Paste_Image.png

option占位符

最高学历：

请选择

小学毕业

初中毕业

高中毕业

大学专科

大学本科

硕士及以上

Paste_Image.png

更多data属性

操作：

请选择

编辑用户

删除用户

Paste_Image.png