之前介绍了JQM的按钮,今天来说说JQM中的表单元素。
- JQM表单元素说明
而且,就规范性来讲,每个表单元素应该都有相应的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表单元素详解
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提供了一套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也提供一套非常漂亮的转场效果,可以通过在表单上设置data-transition属性来控制转场效果(1.3版本中的转场效果虽然很漂亮,但是在某些Android机器中会出现卡顿甚至白屏的现象,这跟JQM实现转场时的样式有关,目前官方并没有给出很好的解决方案,不过在1.4版本的发布文档中提到这一问题已经有了很大改善。但是笔者仍然建议在Android应用中禁用转场,因为就目前看来,它的表现仍然不理想)
data-transition提供的转场方式包括:slide 滑动(默认值,从左至右滑出), slideup(从下至上滑出), slidedown(从上至下滑出), pop(从中心渐显展开), fade(渐显), flip(翻转)。
- 终于写完了