<ul data-role="listview" data-inset="true"> <li> <a href="index.html">Get Friends</a> </li> <li> <a href="index.html">Post to Wall</a> </li> <li> <a href="index.html">Send Message</a> </li> </ul>
jQuery Mobile 提供一组丰富的列表视图。更多详细信息，请参见 jQuery Mobile 列表视图页面（参阅 ）。
表单表单是一种常见的 Web 构件，用于将信息发布到服务器。jQuery Mobile 支持许多表单 UI 组件：文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。所有这些都很容易创建。 介绍了其中的大多数元素。
jQuery Mobile 提供一组丰富的列表视图。 显示一个带菜单按钮和提交按钮的表单。
清单 24. 简单表单和提交按钮<form action="forms-results.php" method="get"> <fieldset> <div data-role="fieldcontain"> <label for="select-options">Choose an option:</label> <select> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</option> </select> </div> <button type="submit">Submit</button> </fieldset> </form>
选择按钮是由本机 <select> 所定义的，但是 jQuery Mobile 改进了其外观。<div data-role="fieldcontain"> 语句对不同值进行了分组，便于清楚呈现。表单本身是通过本机 <form action="..." method="get"> 所定义的。
显示 中的结构.
图 22. 带有选择菜单和提交按钮的简单表单
jQuery Mobile 表单元素页面提供更多信息（参阅 ）。
页面过渡jQuery Mobile 支持许多非常酷的过渡，基于 CSS 的过渡，如 所示。这些过滤可以应用到对话框和页面中。
表 2. 基于 CSS 的过渡过渡使用
fade淡入/淡出过渡效果
pop泡泡过渡效果
flip翻转过渡效果
turn旋转过渡效果
flow流动（类似于滑动）过渡效果
slide滑动（水平）过渡效果
slideup显示从底部滑动到顶部的页面或对话框
slidedown显示从顶部滑动到底部的页面或对话框
none无过渡效果
要强制执行一个特定动画，请将 data-transition 属性添加在链接上，如 所示。
清单 25. 添加 data-transition 属性<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
过渡是硬件加速的，需要浏览器支持 3D 转换。不支持 3D 的浏览器将不能后退。
jQuery Mobile 过渡页面显示活动中的过渡和其他相关信息（参阅 ）。
主题和 ThemeRoller有了 jQuery Mobile，您就可以使用 data-theme 属性来定制您自己应用程序的主题外观。jQuery Mobile 提供一个默认主题和 5 个附加样本，命名从 A 到 E，如 所示。
表 3. 主题和样式主题样式
默认主题
样本 A
样本 B
样本 C
样本 D
样本 E
您可以使用元素和按钮等单个元素作为主题。
拥有基于 ThemeRoller Web 的应用程序，如 所示，您就可以创建您自己的移动 Web 应用程序或者迷你网站的主题了。您也可以使用 ThemeRoller 构建自己的主题，下载自定义 CSS 文件，并在您的项目中使用。
图 23. ThemeRoller
在本文中，您了解了有关 jQuery Mobile 框架的基本概念。本文通过一个示例向您展示了如何使用基本页面、导航、工具栏、列表视图、表单控件和过渡效果。该框架提供了很多特性，包括一些用于高级应用程序的方法和事件。有了 jQuery Mobile，您还可以使用和定制小部件。希望本文可以激发您使用 jQuery Mobile 编写功能性移动 Web 应用程序 UI 的激情。
下载描述名字大小
jQuery 插件源代码jquerymobileexamplecode.zip2KB
参考资料 学习
developerWorks: 登录
标有星（*）号的字段是必填字段。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。
昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
所有提交的信息确保安全。
相关文章
精彩导读
热门资讯
关注我们
