[b]一.表单组件基础 1.组件简介 [/b]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。 [b]2.组件使用规范 [/b]所有的表单组件，只要是需要与服务器传送数据，都应该包裹在一个 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 会自动在容器底部增加一条细边框作为分隔。 [b]二.表单组件详解 1.文本输入框 [/b]在 jQuery Mobile 中，文本输入框和文本输入域都是使用标准 HTML 标记的，并且支持一些 HTML5 的 input 类型，如 password, email, tel, number, range 等更多的类型，而对于一些类型（ range, serach ） jQuery Mobile 则会将其转换为 text 的 input 类型，统一标准化其样式，下面是文本输入框的调用代码及示图。 [img]http://files.jb51.net/file_images/article/201605/2016517161820966.png?2016417161831[/img] [b]2.文本输入域[/b] [img]http://files.jb51.net/file_images/article/201605/2016517161851957.png?2016417161859[/img] [b]3.搜索输入框 [/b]正如上文所述，增强后的输入框左边有一个放大镜图标，点击触发搜索，在输入内容后，输入框的右边还会出现一个叉的图标，点击清除已输入的内容。 [img]http://files.jb51.net/file_images/article/201605/2016517161928205.png?2016417161937[/img] [b]4.单选框 [/b]单选框组件用于在页面中提供一组选项，并且只能选择其中一个选项。在 jQuery Mobile 中，单选框组件不但在外观上美化了，还增加了一些图标用于增强视觉反馈。 type="radio" 标记的 input 元素会自动增强为单选框组件，但 jQuery Mobile 建议开发者使用一个带 data-role="controlgroup" 属性的 fieldset 标签包括选项，并且在 fieldset 内增加一个 legend 元素，用于表示该单选框的标题。 [img]http://files.jb51.net/file_images/article/201605/2016517161955934.png?201641716203[/img] [b]5.复选框 [/b]复选框也是用于在页面中提供一组选项的，但可以同时选择多个选项。与单选框相同，复选框组件也无需额外调用 data-role 属性， type="checkbox" 标记的 input 元素会自动增强为 jQuery Mobile 样式，当然 jQuery Mobile 也建议开发者使用一个带 data-role="controlgroup" 属性的 fieldset 标签包括选项，并且在 fieldset 内增加一个 legend 元素，用于表示该复选框的标题。 [img]http://files.jb51.net/file_images/article/201605/2016517162016973.png?2016417162024[/img] 默认的复选框组件是垂直排列选项的，我们可以在 fieldset 上添加 data-type="horizontal" 使其样式改为水平按钮组的样式， jQuery Mobile 会使选项元素浮动并去掉图标。 [img]http://files.jb51.net/file_images/article/201605/2016517162031796.png?2016417162041[/img] [b]6.选择列表 [/b]选择列表是基于 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"。 下面给出一个自定义菜单的例子： 选择按钮 [img]http://files.jb51.net/file_images/article/201605/2016517162111054.png?2016417162118[/img] 自定义菜单 [img]http://files.jb51.net/file_images/article/201605/2016517162130555.png?2016417162138[/img] 若需要多项选择，则可以在 select 标签上添加 multiple="multiple" ，但原生的选择菜单不支持该功能。对于多项选择菜单，还有几点要注意的： （1）jQuery Mobile 会在菜单里创建一个 jQuery Mobile header ，并在 header 的左边添加一个关闭菜单按钮。 （2）当用户选择两个或以上选项时选择按钮右侧会出现一个小图标，图标内显示已选择选项的个数。 （3）所有选择的选项文本会显示在选择按钮上，如果文字超出按钮长度，会以省略号代替多余的内容。 （4）如果选项过多，菜单会以新页面的形式显示。   多项选择列表实例 [img]http://files.jb51.net/file_images/article/201605/2016517162154449.png?201641716222[/img] 另外我们还可以对选项进行分组，使用以下标签标签把同一组的选项包裹起来，其中 label 的值为该分组的标题。 分组选择列表实例 [img]http://files.jb51.net/file_images/article/201605/2016517162228274.png?2016417162241[/img] [b]7.滑杆 [/b]在 jQuery Mobile 中，type="range" （ HTML5 属性值 ） 的 input 元素会被增强为划杆组件，该组件可以通过一些属性值配置，value 设置滑杆的初始值， min 和 max 分别设置滑杆的下限和上限。另外滑杆组件还支持键盘响应，键盘的右箭头，上箭头，Page Up 键都可以增加滑杆的当前值，相应的，左键头，下箭头， Page Down 键可以减少滑杆的当前值，使用 Home 键和 End 键则可以设置当前值为最小值（下限）和最大值（上限）。 [img]http://files.jb51.net/file_images/article/201605/2016517162256750.png?201641716234[/img] [b]8.开关 [/b]具有两个 option 的 select 元素添加 data-role="slider" 属性后会被增强为 jQuery Mobile 的开关组件，用于表示布尔型数据（ ture or false ），拖动滑动条可以在“开”与“关”之间选择，其中第一个 option 会被渲染成“开”的样式。 [img]http://files.jb51.net/file_images/article/201605/2016517162324811.png?2016417162331[/img] [b]三.提交表单 [/b]jQuery Mobile 自动采用 Ajax 的方式提交表单，默认的 method 为 get ，action 为当前页面的相对路径，在表单页面和结果页面之间会有平滑的转场过渡，并且可以在表单上使用 data-transition 指定转场效果。如果不想使用 Ajax 的方式提交表单，可以在全局事件禁用 Ajax （如何全局禁止 Ajax 并不在本文讨论范围，但会在本系列的后续文章中作详细说明）或是在 form 上添加 data-ajax="false" 属性，下面是 data-transition 的所有可取值。 slide 滑动（默认值，从左至右滑出）， slideup（从下至上滑出）， slidedown（从上至下滑出）， pop（从中心渐显展开）， fade（渐显）， flip（翻转）。 [b]四.主题样式 [/b]关于主题样式，在上一文中已经介绍过了，这里引用一下： “data-theme=“” 属性， 所有的 jQuery Mobile 组件均支持该属性，用于设置组件的颜色， 该属性默认有五个值 a, b, c, d, e，分别代表由深到浅五种颜色，另外开发者还可以通过在 CSS 里添加相应的 Class 来自定义颜色。” [b]五.刷新表单组件 [/b]由于 jQuery Mobile 对原生的 HTML 表单元素进行了渲染和追加元素，所以开发者想通过 js 直接控制表单组件会比较麻烦（如使用了 Web SQL Database 储存了数据在本地，在打开网页时希望通过 js 获取数据并给表单组件赋值的情况），因此 jQuery Mobile 设计了用 js 给表单组件赋值的 API ，下面逐一举例介绍： [b]1.单选按钮 [/b]选择第一个选项 [b]2.复选按钮 [/b]选择第一个选项 [b]3.选择列表 [/b]选择第一个选项，注意选项的索引是从1开始 [b]4.滑杆 [/b]设置值为40 [b]5.开关 [/b]选择第一个选项   注： refresh 方法不能直接使用在 Ajax 获取的内容上，例如 js 要操纵的表单组件在另一个 Page， js 只在首页加载时载入，这样 jQuery Mobile 会出错（不会有直接报错，只是该段 js 会失效），我们可以使用 live('pagebeforeshow', function(){}) 方法使到该段 js 在过场到表单组件所在页面时才载入（ pagebeforeshow 是 jQuery Mobile 事件之一，此外还有 pagebeforehide， pageshow， pagehide 三种方法）。下面给出一个例子：