除了刚刚介绍的所有优秀的列表增强特性之外，还有最后一个增强，它极大地改善了长列表的可用性。有时，就是无法削减需要放入移动网站的所有内容。在这种情况下，您就会有一个长列表，它看起来几乎是无法使用的，而搜索筛选器栏就是处理该问题的一个很好的方式。很幸运，使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。只需将 data-filter 属性添加到列表，并将其值指定为 true（）。

清单 12. 将搜索筛选器栏添加到 jQuery Mobile 列表

<ul data-role="listview" data-filter="true"> <li><a href="#">Chris A.</a></li> <li><a href="#">Cindy V.</a></li> <li><a href="#">John B.</a></li> <li><a href="#">Tammy D.</a></li> </ul>

搜索筛选器栏添加一个文本输入，为用户提供一种功能可供他们输入正在查找的内容，同时列表将根据输入实时进行筛选。例如，如果您有一个员工姓名列表，并且您将一个搜索筛选器栏添加到该列表，用户就能够通过向搜索筛选器文本输入键入一个或多个字符，来筛选和缩小在该页面上显示的结果范围。

您也可以提供更进一步的增强，将分隔符添加到您的 listview，同时仍然包括一个搜索筛选器栏（见 ）。

清单 13. 将搜索筛选器栏添加到一个包括列表分隔符的 jQuery Mobile 列表

<ul data-role="listview" data-filter="true"> <li data-role="list-divider">C</li> <li><a href="#">Chris A.</a></li> <li><a href="#">Cindy V.</a></li> <li data-role="list-divider">J</li> <li><a href="#">John B.</a></li> <li data-role="list-divider">T</li> <li><a href="#">Tammy D.</a></li> </ul>

列表分隔符和搜索筛选器栏的组合，是一个相当好的特性，并且真正增加了繁琐的长列表的可用性，否则，这些列表将是无法使用的。

表单元素

凭借 jQuery Mobile，在支持它的浏览器上，原生表单元素都被转换为自定义控件。这些自定义控件是原生表单元素以及由该框架专门创建的某些特殊表单元素的增强版本。幸运的是，对于不支持这些表单元素的浏览器，所有表单元素都可以降级，所以可用性并不是一个问题。使用 jQuery Mobile 进行文本输入，基本上也与原生文本输入相同；然而，您可以使用新的 HTML5 输入类型，如 email、tel 和 number。要创建任何这些表单元素，您只需要将输入类型设置为其中一个这里所提及的值。如需了解 HTML5 输入类型的完整列表，请参阅 。

除了所支持的 HTML5 输入类型之外，您还可以创建一个滑块。滑块包括一个图柄和一个供图柄在上面滑动的槽 。随着图柄的移动，滑块的值被存储起来，然后，在表单被提交时，该值也被提交。要创建一个滑块，您可以从基本的 HTML 输入开始，但要将 type 属性定义为 range。然后，添加 min、max 和 value 属性，并为 value 属性定义一个默认值，该值确定图柄在滑块上的位置。 显示了一个滑块元素示例，其 max 值为 10，min 值为 0，默认的 value 值为 2。

清单 14. 使用 jQuery Mobile 框架创建一个滑块元素

<div data-role="fieldcontain"> <label for="slider">My slider:</label> <input type="range" value="2" min="0" max="10" /> </div>

最后一种自定义输入类型是反转切换开关，它在移动设备上已很常见。对于处理 on/off 或 true/false 类型的数据，这是一个很好的元素。用户使用反转开关的方式可以有很多种，通过点击开关的任意一侧，或类似滑块一样拖动图柄。创建一个切换开关与创建一个滑块类似，但其中还是有一些较大的差异。输入变成一个 select 元素，并且要添加两个选项。 提供了切换开关的示例，该开关提供 on/off 功能。

清单 15.使用 jQuery Mobile 框架创建切换开关

<div data-role="fieldcontain"> <label for="slider">Select slider:</label> <select data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div>

您可能也注意到了，有一个 data-role 属性的值为 slider。该属性值将一个自定义 jQuery Mobile 选择列表转换为一个切换开关。

结束语

jQuery Mobile 框架提供一个为移动网站创建可用 UI 组件的快速解决方案。在某些情况下，您只需要用几行简单的 HTML，就可以包括一个可以向您网站添加值的移动 UI 组件。本文并未介绍由该框架所提供的组件完整列表，如需了解有关框架组件的更多信息并观看它们的运行，请查看 中的链接。

参考资料 学习

要了解如何为您的 jQuery Mobile UI 组件创建自定义主题，请查看 创建自定义 jQuery 移动主题（developerWorks，2011 年 11 月）。

请务必阅读 使用 jQuery Mobile API 实现细粒度的自定义控制（developerWorks，2012 年 1 月）。

获得 HTML5 输入类型 的完整列表。

阅读 jQuery Mobile 框架的 。

在 jQuery Mobile 演示页面上可找到 jQuery Mobile 框架所提供的 。

developerWorks 开源技术专区 提供了有关开源工具和使用开源技术的丰富指南信息。

获得产品和技术

下载并引用 jQuery Mobile JavaScript 和 CSS 文件。

下载并试用 IBM Mobile Technology Preview，一组代码示例和服务，可以帮助您开始构建或扩展和集成到企业的移动应用程序。该预览包括一个 RESTful 通知服务；一个用于构建混合移动应用程序的开源框架 PhoneGap；一个轻量级的 WebSphere Application Server 运行时；以及向您演示其工作方式的样例代码。

IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile 包括 IBM Dojo 1.7 Toolkit、新的移动和富 Internet 应用程序 (RIA) 构建块，以及一个基于 Dojo 的图表组件。使用附带的 Rational 工具，该 Feature Pack 可帮助您采用原先面向桌面浏览器开发的 WebSphere 应用程序，对其进行调整，并将它们部署到移动设备中。

以最适合您的方式 评估 IBM 产品：下载产品试用版，在线试用产品，在云环境中使用产品，或者在 SOA 沙箱 中花几小时学习如何高效实现面向服务的架构。

讨论

加入 developerWorks 社区。查看开发人员推动的博客、论坛、群和维基，并与其他 developerWorks 用户交流。

条评论

developerWorks: 登录

标有星（*）号的字段是必填字段。