一.表单组件基础 1.组件简介
jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用。需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便。jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type="text" 标记的 input 元素会自动增强为 jQuery Mobile 样式,无需额外添加 data-role 属性。 (2)文本输入域, textarea 元素会被自动增强,无需额外添加 data-role 属性,用于多行输入文本,jQuery Mobile 会自动增大文本域的高度,避免在移动设备中很难找到滚动条的情况。 (3)搜索输入框, type="search" 标记的 input 元素会自动增强,无需额外添加 data-role 属性,这是一个新的 HTML 元素,增强后的输入框左边有一个放大镜图标,点击触发搜索,在输入内容后,输入框的右边还会出现一个叉的图标,点击清除已输入的内容,非常方便。 (4)单选按钮, type="radio" 标记的 input 元素会自动增强,无需额外添加 data-role 属性。 (5)复选按钮, type="checkBox" 标记的 input 元素会自动增强,无需额外添加 data-role 属性。 (6)选择列表, select 元素会被自动增强,无需额外添加 data-role 属性。 (7)划杆, type="range" 标记的 input 元素会自动增强,无需额外添加 data-role 属性。 (8)开关, select 元素添·加 data-role="slider" 属性后会被增强会 jQuery Mobile 的开关组件, select 中只能有两个 option。
2.组件使用规范
所有的表单组件,只要是需要与服务器传送数据,都应该包裹在一个 form 标签内,并且应该指定好 form 的 action 和 method 属性。当然如果你使用的是 Web sql Database 这类本地储存,即数据并不需要与服务器传送,可以不用 form 标签和 sumbit 提交。另外 form 的 id 需要在整站中唯一,由于 jQuery Mobile 使用 Ajax 导航,因此不同的 page 可以同时加载到一个 DOM 中,因此 form id 必须整站唯一以保证每个 DOM 的表单 id 都是不同的。每一个表单元素应该要有相应的 label 对应,label 的 for 值要与元素的 id 相同,使其在语义上相关,并且可以使用一个带有 data-role="fieldcontain" 属性的 div 或 fieldset 容器包裹, jQuery Mobile 会自动在容器底部增加一条细边框作为分隔。
二.表单组件详解 1.文本输入框
在 jQuery Mobile 中,文本输入框和文本输入域都是使用标准 HTML 标记的,并且支持一些 HTML5 的 input 类型,如 password,email,tel,number,range 等更多的类型,而对于一些类型( range,serach ) jQuery Mobile 则会将其转换为 text 的 input 类型,统一标准化其样式,下面是文本输入框的调用代码及示图。2.文本输入域
3.搜索输入框
正如上文所述,增强后的输入框左边有一个放大镜图标,点击触发搜索,在输入内容后,输入框的右边还会出现一个叉的图标,点击清除已输入的内容。4.单选框
单选框组件用于在页面中提供一组选项,并且只能选择其中一个选项。在 jQuery Mobile 中,单选框组件不但在外观上美化了,还增加了一些图标用于增强视觉反馈。 type="radio" 标记的 input 元素会自动增强为单选框组件,但 jQuery Mobile 建议开发者使用一个带 data-role="controlgroup" 属性的 fieldset 标签包括选项,并且在 fieldset 内增加一个 legend 元素,用于表示该单选框的标题。5.复选框
复选框也是用于在页面中提供一组选项的,但可以同时选择多个选项。与单选框相同,复选框组件也无需额外调用 data-role 属性, type="checkBox" 标记的 input 元素会自动增强为 jQuery Mobile 样式,当然 jQuery Mobile 也建议开发者使用一个带 data-role="controlgroup" 属性的 fieldset 标签包括选项,并且在 fieldset 内增加一个 legend 元素,用于表示该复选框的标题。默认的复选框组件是垂直排列选项的,我们可以在 fieldset 上添加 data-type="horizontal" 使其样式改为水平按钮组的样式, jQuery Mobile 会使选项元素浮动并去掉图标。
6.选择列表
选择列表是基于 HTML select 元素的,具有原生菜单和自定义菜单两种形式,原生菜单与自定义菜单都有一个样式美化了的选择按钮,不同的是在自定义菜单中原生的 option 元素将被隐藏, jQuery Mobile 会生成一个由 CSS3 和 HTML5 构成的菜单代替,并且这个菜单是 ARIA 的。关于 ARIA ,这里小科普一下: ARIA, 即 Accessible Rich Internet Application ( 加强无障碍网页应用程序 ),它是 W3C 的无障碍网页倡议(WAI)工作小组在倡导大家使用的无障碍网页应用技术。它是一套独立的规范,可以帮助 Web 程序,尤其是使运用了大量前端技巧( Ajax )的网页更具备可访问性,通俗点说,读屏设备等不大能理解前端语义的设备将可以了解到页面的内容,这样残疾人士不仅可以浏览网页甚至与页面进行交互。
HTML select 元素会被自动增强为原生的选择列表组件,若需要自定义样式菜单,可以在 select 上添加 data-native-menu="false" 属性。
若需要禁止选择某一个选项,可以在选项的 option 标签上添加 disabled="disabled"。
选择按钮
若需要多项选择,则可以在 select 标签上添加 multiple="multiple" ,但原生的选择菜单不支持该功能。对于多项选择菜单,还有几点要注意的:
(1)jQuery Mobile 会在菜单里创建一个 jQuery Mobile header ,并在 header 的左边添加一个关闭菜单按钮。 (2)当用户选择两个或以上选项时选择按钮右侧会出现一个小图标,图标内显示已选择选项的个数。 (3)所有选择的选项文本会显示在选择按钮上,如果文字超出按钮长度,会以省略号代替多余的内容。 (4)如果选项过多,菜单会以新页面的形式显示。
多项选择列表实例
<div class="jb51code">
<pre class="brush:xhtml;">
<div data-role="fieldcontain">
<label for="select-choice-2" class="select">多项选择列表
<select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2">
<option value="12h">12小时
<option value="1d">一天
<option value="2d">两天
<option value="week">一周