jQuery Mobile 教程
jQuery Mobile 教程
jQuery Mobile 简介
jQuery Mobile
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
每章中的 TIY 实例
通过我们的在线编辑器，您能够编辑代码，然后点击提交按钮来查看结果。
实例
<div data-role="page" id="pageone"> <div data-role="header"> <h1>在此处写入标题</h1> </div> <div data-role="content"> <p>在此处写入正文</p> </div> <div data-role="footer"> <h1>在此处写入页脚文本</h1> </div> </div>
请点击“亲自试一试”按钮来查看结果。
jQuery Mobile 安装
jQuery Mobile 简介
jQuery Mobile 页面
向您的网页添加 jQuery Mobile
有多个办法可供您在网站上开始使用 jQuery Mobile。您可以：
从 CDN 引用 jQuery Mobile（推荐）
从 jQuerymobile.com 下载 jQuery Mobile 库
从 CDN 引用 jQuery Mobile
提示：CDN (Content Delivery Network) 用于通过 web 来分发常用的文件，以此加快用户的下载速度。
与 jQuery 类似，无需在您的计算机上安装任何程序；您只需直接在 HTML 页面中引用以下样式表和 JavaScript 库，这样 jQuery Mobile 就可以工作了：
jQuery Mobile CDN:
<head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head>
亲自试一试
下载 jQuery Mobile
如果您希望在服务器上存放 jQuery Mobile，您可以从 jQuerymobile.com 下载文件。
<head> <link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script> </head>
提示：请将下载的文件放到您希望使用的文件夹中。
提示：您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性？
在 HTML5 中该属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！
jQuery Mobile 页面
使用 jQuery Mobile 入门
提示：尽管 jQuery Mobile 适用于所有移动设备，它在台式计算机上仍然可能存在兼容性问题（由于有限的 CSS3 支持）。
因此在本教程中，我们推荐您使用谷歌的 Chrome 浏览器，以获得最好的阅读体验。
实例
<body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="content"> <p>我是一名移动开发者！</p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body>
亲自试一试
例子解释：
data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
提示：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
在 jQuery Mobile 中添加页面
在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：
实例
<div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo">转到页面二</a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">转到页面一</a> </div> </div>
亲自试一试
注释：包含大量内容的 web 应用程序会影响加载时间（比如文本、链接、图像和脚本等等）。如果您不希望在内部链接页面，请使用外部文件：
<a href="externalfile.html">转到外部页面</a>
将页面用作对话框
对话框是用来显示信息或请求输入的视窗类型。
如需在用户点击（轻触）链接时创建一个对话框，请向该链接添加 data-rel="dialog"：
实例
<div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo" data-rel="dialog">转到页面二</a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">转到页面一</a> </div> </div>
jQuery Mobile 过渡
jQuery Mobile 页面
jQuery Mobile 按钮
jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果。
jQuery Mobile 过渡效果
jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。
注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：
浏览器支持
Internet Explorer 10 支持 3D 转换（更早的版本不支持）
Opera 仍然不支持 3D 转换
过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交：
<a href="#anylink" data-transition="slide">滑动到页面二</a>
下面的表格展示了可与 data-transition 属性一同使用的可用过渡：
| 过渡 | 描述 | 测试 |
|---|---|---|
| fade | 默认。淡入淡出到下一页。 | 测试 |
| flip | 从后向前翻动到下一页。 | 测试 |
| flow | 抛出当前页面，引入下一页。 | 测试 |
| pop | 像弹出窗口那样转到下一页。 | 测试 |
| slide | 从右向左滑动到下一页。 | 测试 |
| slidefade | 从右向左滑动并淡入到下一页。 | 测试 |
| slideup | 从下到上滑动到下一页。 | 测试 |
| slidedown | 从上到下滑动到下一页。 | 测试 |
| turn | 转向下一页。 | 测试 |
| none | 无过渡效果。 | 测试 |
提示：在 jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果浏览器支持）。
提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 "reverse" 的 data-direction 属性。在后退按钮上是默认的。
实例
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
jQuery Mobile 按钮
jQuery Mobile 过渡
jQuery Mobile 图标
移动应用程序构建于触控操作的便利性之上。
在 jQuery Mobile 中创建按钮
jQuery Mobile 中的按钮可通过三种方法创建：
使用 <button> 元素
使用 <input> 元素
使用 data-role="button" 的 <a> 元素
<button>
<button>按钮</button>
亲自试一试
<input>
<input type="button" value="按钮">
亲自试一试
<a>
<a href="#" data-role="button">按钮</a>
亲自试一试
提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。
导航按钮
如需通过按钮来链接页面，请使用 data-role="button" 的 <a> 元素：
实例
<a href="#pagetwo" data-role="button">转到页面二</a>
亲自试一试
行内按钮
默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline="true"：
实例
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>
亲自试一试
组合按钮
jQuery Mobile 提供了对按钮进行组合的简单方法。
请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮：
实例
<div data-role="controlgroup" data-type="horizontal"> <a href="#anylink" data-role="button">按钮 1</a> <a href="#anylink" data-role="button">按钮 2</a> <a href="#anylink" data-role="button">按钮 3</a> </div>
亲自试一试
提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。
后退按钮
如需创建后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）：
实例
<a href="#" data-role="button" data-rel="back">返回</a>
亲自试一试
更多用于按钮的 data-* 属性
| 属性 | 值 | 描述 | 实例 |
|---|---|---|---|
| data-corners | true | false | 规定按钮是否有圆角。 | 测试 |
| data-mini | true | false | 规定是否是小型按钮。 | 测试 |
| data-shadow | true | false | 规定按钮是否有阴影。 | 测试 |
如需有关 jQuery Mobile data-* 属性的完整信息，请访问我们的 jQuery Mobile Data 属性参考手册。
下一节演示如何为按钮添加图标。
jQuery Mobile 按钮图标
jQuery Mobile 按钮
jQuery Mobile 工具栏
jQuery Mobile 提供的一套图标可令您的按钮更具吸引力。
为 jQuery Mobile 按钮添加图标
如需向您的按钮添加图标，请使用 data-icon 属性：
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 属性。
下面我们列出了 jQuery Mobile 提供的一些可用图标：
| 属性值 | 描述 | 图标 | 实例 |
|---|---|---|---|
| data-icon="arrow-l" | 左箭头 | 测试 | |
| data-icon="arrow-r" | 右箭头 | 测试 | |
| data-icon="delete" | 删除 | 测试 | |
| data-icon="info" | 信息 | 测试 | |
| data-icon="home" | 首页 | 测试 | |
| data-icon="back" | 返回 | 测试 | |
| data-icon="search" | 搜索 | 测试 | |
| data-icon="grid" | 网格 | 测试 |
如需关于 jQuery Mobile 按钮图标的完整信息，请访问我们的 jQuery Mobile 图标参考手册。
定位图标
您也能够规定图标被放置的位置：上、右、下或左。
请使用 data-iconpos 属性来规定位置：
图标位置：
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
亲自试一试
提示：默认地，所有按钮中的图标靠左放置。
只显示图标
如果只需显示图标，请将 data-iconpos 设置为 "notext"：
Back:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
