jQuery Mobile 组件 之 表单

之前介绍了JQM的按钮，今天来说说JQM中的表单元素。

• JQM表单元素说明

要说表单元素，当然是包含在一个表单（<from></form>）中的了，而且必须保证form的id属性是全站唯一的。因为在上上篇文章中的例子也看到，在HTML5中不同的page可能加载到同一DOM中去，因此如果只保证id属性在page中唯一已经不好使了。

而且，就规范性来讲，每个表单元素应该都有相应的label标签对应，而且label的for属性的值应该与表单元素的id值一致。可以使用一个带有 data-role="fieldcontain" 属性的 div 或 fieldset 容器包裹，JQM会自动在容器底部增加一条细边框作为分隔。当然，你要不写label也是可以的，不过规范嘛。。。还是尽量遵守的好。。。

这里需要说明一下，由于JQM的表单组件都是基于标准的HTML5表单的增强，所以即使在引入JQM库时出错，也不影响功能使用，无非是丑一点。

下面来看看JQM中支持增强的表单元素有哪些吧：

1.文本框。 如果input标签的type属性为text ，JQM会将其自动增强为JQM样式的文本输入框，无需额外添加 data-role 属性。

2.文本域。textarea 元素会被自动增强为JQM样式的文本域，同样无需额外添加 data-role 属性。

3.搜索框。当input标签的type属性为search时，JQM会将其自动增强为JQM样式的文本输入框，无需额外添加 data-role 属性。

4.单选按钮。 如果input标签的type属性为radio，JQM会将其自动增强为JQM样式的单选按钮，无需额外添加 data-role 属性。

5.复选按钮。如果input标签的type属性为checkbox，JQM会将其自动增强为JQM样式的复选按钮，无需额外添加 data-role 属性。

6.划杆。 type="range" 标记的 input 元素会自动增强，无需额外添加 data-role 属性。

7.下拉框。select也会被自动增强，而且当枚举条目过多时会以新页面的形式展现出来。

8.开关。如果给select标签加上data-role="slider"属性，JQM会自动将其加上开关样式，需要注意的是，这时select中的option只能有两个。

• JQM表单元素详解

1.文本框

input标签，没啥说的，JQM支持标准HTML的几乎所有类型的input框，包括text，password，email，tel，number等等，而且都会将其渲染成JQM样式的input框，同时继承标准HTML标签中的所有特性。下面是代码示例：

<div data-role="fieldcontain">    <label for="text">文本输入框</label>    <input type="text" name="text" id="text" value=""  /></div>

效果：

2.文本域

textarea标签也会被自动加上JQM的样式，用于多行输入文本，而且JQM会自动增大文本域的高度，避免在移动设备中很难找到滚动条的情况。

代码：

<div data-role="fieldcontain">    <label for="textarea">文本输入域</label>    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></div>

效果：

3.搜索框

当input标签的type属性为search时，输入框会自动变成搜索框。有些童鞋可能木有用过这个元素，这个元素是HTML5中新增的，在JQM增强后会在输入框左边多出一个可点击的放大镜图标，在输入内容后，输入框邮编会有个小叉，点击清除内容。用惯原生应用的你是不是很熟悉呢。

代码：

<div data-role="fieldcontain">    <label for="search">搜索输入框</label>    <input type="search" name="search" id="search" value="" /></div>

效果：

4.单选框

JQM中的单选框不止在外观上做了美化，同时增加了很多意想不到的效果来增强反馈，还支持按钮的空间排列选择。不过，JQM官方建议开发者在一组radio外部加上一个统一的fieldset容器，并且在这个容器中加入data-role="controlgroup"属性，并且在 fieldset 内增加一个 legend 元素，用于表示该单选框的标题。（标题这个经常用不上，但这只是官方处于标准化的一个建议，开发者作为参考即可）

代码：

<div data-role="fieldcontain">    <fieldset data-role="controlgroup">        <legend>单选框:</legend>        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />        <label for="radio-choice-1">蓝</label>        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />        <label for="radio-choice-2">绿</label>        <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />        <label for="radio-choice-3">黑</label>    </fieldset></div>

效果：

如果在这个标签中加入data-type="horizontal"，JQM会将一组radio渲染成横向排列的一组单选按钮，这时的按钮会去被掉浮动和图标：

5.复选框

没啥特性，用法可参考单选按钮，这里看一下效果就好：

代码：

<div data-role="fieldcontain">    <fieldset data-role="controlgroup">        <legend>复选框</legend>         <input type="checkbox" name="blue" value="blue" id="effect1"/>         <label for="effect1">效果1</label>        <input type="checkbox" name="green" value="green" id="effect2"/>        <label for="effect2">效果2</label>        <input type="checkbox" name="pink" value="pink" id="effect3"/>        <label for="effect3">效果3</label>    </fieldset></div>

效果：

横向排列：

6.滑杆

将input标签的type属性设置为"range"时，元素会被增强为划杆组件，当然，这个动作时HTML5实现的，在这里介绍一下JQM对其的渲染以及一些参数。

我们可以通过设置一些参数来控制滑杆的效果：max可以设置其最大值，min设置最小值，step设置每次拖拽变动的数值，value设置初始值。

而且，这个组件支持对键盘动作的响应，键盘上的方向键，pageUP，pageDown，HOME，END都会得到响应。

下面可以看看效果。

代码：

<div data-role="fieldcontain"><span></span><label for="slider">滑杆</label><input type="range" name="slider" id="slider" value="0" min="0" max="100"/></div>

效果：

在用DOM查看器来查看JQM帮我们生成的代码时，会发现滑块移动的时候，滑块条为a标签实现的，那个输入框为input 类型为number标签：

<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain"><label for="slider">Slider3:</label><input id="kk" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-slider-input" type="number" data-type="range" max="100" min="0" value="0" name="slider"><div class="ui-slider ui-btn-down-c ui-btn-corner-all" role="application"><a class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="34" aria-valuetext="34" title="34" aria-labelledby="kk-label" style="left: 34%;"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span></span></a></div></div>

如果你只想要个滑杆的效果，不想要那个输入框，可以直接将其隐藏或者通过给他的容器加上特定的样式来控制。

7.下拉框

下拉框分成原生样式和自定义样式两种，select标签会被自动加强成原生样式的下拉框，如果想用自定义样式，可以为select标签加上data-native-menu="false"属性。这里建议使用自定义样式。

在原生样式中，选项是由option来实现，当然是经过美化的；而在自定义样式中，原生的option都会被隐藏掉，JQM会用HTML5+CSS3构建一个新的选项列表菜单来展现。

7.1基本下拉框

下面提供一个自定义样式的例子：

代码：

<div data-role="fieldcontain">    <label for="select-choice-1" class="select">选择列表</label>    <select data-native-menu="false" name="select-choice-1" id="select-choice-1">        <option value="12h">12小时</option>        <option value="1d">一天</option>        <option value="2d">两天</option>        <option value="week">一周</option>    </select></div>

按钮：

点击后展开选择列表:

7.2多选下拉框
同时，这里还支持多选！只需要在select标签中加入multiple="multiple"属性，这个下拉框就支持多选了。需要注意的是，原生样式的下拉框并不支持多选；而且多选时的选项列表会在头部有一个小叉号，表示保存退出；同时，当用户选择多个选项并保存退出后，所有选择的选项的文本都会显示在下拉框上，而且在右边会显示选择的条目数。

下面看看多选的例子：

代码：

<div data-role="fieldcontain">    <label for="select-choice-2" class="select">多项选择列表</label>    <select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2">        <option value="12h">12小时</option>        <option value="1d">一天</option>        <option value="2d">两天</option>        <option value="week">一周</option>    </select></div>

初始状态：

展开后：

选择后：

7.3分组选项

如果用optgroup标签将一组option包含起来，并为这个标签指定label="XXX”的属性，就可以实现将选项分组。

代码：

<div data-role="fieldcontain">    <label for="select-choice-3" class="select">分组选择列表</label>    <select data-native-menu="false" name="select-choice-3" id="select-choice-3">        <optgroup label="Group1">            <option value="12h">12小时</option>            <option value="1d">一天</option>            <option value="2d">两天</option>            <option value="week">一周</option>        </optgroup>        <optgroup label="Group2">            <option value="1m">一个月</option>            <option value="1q">一季度</option>            <option value="1y">一年</option>        </optgroup>    </select></div>

初始效果：

展开后：

8.开关

如果一个select标签中只有两个option，可以给它加上data-role="slider"属性，这时JQM会将其渲染成一个开关。

代码：

<div data-role="fieldcontain">    <label for="slider">开关</label>    <select name="slider" id="slider" data-role="slider">        <option value="off">关闭</option>        <option value="on">开启</option>    </select> </div>

效果：

关于表单组件的介绍几本就是这些。

• 表单组件的刷新

上面提到，JQM在对表单组件渲染时，并不是单纯的在原有表单元素上添加样式，为了得到更好的用户体验，JQM会在原有元素上加上很多新的元素并为他们添加样式和事件，这些动作都是在组件加载的时候完成的，所以如果我们想通过JS在控制这些组件，就不能用传统的方式直接控制了。

对于这一需求，JQM提供了一套API来控制这些组件，下面简单介绍几个。为了方便，这里的例子都是选中表单组件中的第一项。

1.单选按钮

$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");

2.复选按钮

$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");

3.下拉框

var myselect = $('select#select-choice-1');myselect[0].selectedIndex = 1;myselect.selectmenu('refresh');

4.开关

var myswitch = $('select#shakeToClear');myswitch[0].selectedIndex = 1;myswitch.slider('refresh');

5.滑杆（设置值为20）

$("input[type=range]").val(20).slider("refresh");

需要注意的是：不要在获取数据的时候直接使用refresh方法，很可能会出错哦~由于一个文件中可能有多个page，如果你要refresh的组件在其他page里，而JS又是在首页加载的，这时候这段代码就失效了，而且最蛋疼的是这时候浏览器还不报错！所以还是别这么干了。下面推荐一种方式。

就是将你的这段JS绑定在目标page的pagebeforeshow事件上，这样就使得你的这段JS在过场到被操作的组件所在的page时才会被载入。

代码类似这样：

live('pagebeforeshow', function(){})

类似的方法还有pagebeforehide， pageshow， pagehide。不明白的童鞋自行查文档，这里我就不多说了。

• 表单的提交

JQM的表单使用Ajax提交，默认的提交方式是get。如果不想用Ajax，可以在全局禁用Ajax或是在某个form上设置data-ajax=“false”属性。

得到响应后如果需要页面跳转，JQM也提供一套非常漂亮的转场效果，可以通过在表单上设置data-transition属性来控制转场效果（1.3版本中的转场效果虽然很漂亮，但是在某些Android机器中会出现卡顿甚至白屏的现象，这跟JQM实现转场时的样式有关，目前官方并没有给出很好的解决方案，不过在1.4版本的发布文档中提到这一问题已经有了很大改善。但是笔者仍然建议在Android应用中禁用转场，因为就目前看来，它的表现仍然不理想）

data-transition提供的转场方式包括：slide 滑动（默认值，从左至右滑出）， slideup（从下至上滑出）， slidedown（从上至下滑出）， pop（从中心渐显展开）， fade（渐显）， flip（翻转）。

• 终于写完了

关于表单的组件就介绍这些吧，这里只是简单的做了些介绍。更多更详细的内容还请大家参考官方提供的文档，jQuery官方的文档还是很好很强大的。