1、jqueryMoblie教程一，向您的网页添加 jQuery Mobile有多个办法可供您在网站上开始使用 jQuery Mobile。您可以： 从 CDN 引用 jQuery Mobile（推荐） 从 jQ 下载 jQuery Mobile 库从 CDN 引用 jQuery Mobile提示：CDN (Content Delivery Network) 用于通过 web 来分发常用的文件，以此加快用户的下载速度。与 jQuery 类似，无需在您的计算机上安装任何程序；您只需直接在 HTML 页面中引用以下样式表和 JavaScript 库，这样 jQuery Mobile 就可以工作了：jQ
2、uery Mobile CDN:link rel=stylesheet href=script src=script src=亲自试一试下载 jQuery Mobile如果您希望在服务器上存放 jQuery Mobile，您可以从 jQ 下载文件。提示：请将下载的文件放到您希望使用的文件夹中。提示：您是不是奇怪为什么 标签中没有 type=text/javascript 属性？在 HTML5 中该属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！二，使用 jQuery Mobile 入门提示：尽管 jQuery Mobile 适用于所有移动设备，它在台式
3、计算机上仍然可能存在兼容性问题（由于有限的 CSS3 支持）。因此在本教程中，我们推荐您使用谷歌的 Chrome 浏览器，以获得最好的阅读体验。实例 欢迎访问我的主页 我是一名移动开发者！ 页脚文本 亲自试一试例子解释： data-role=page 是显示在浏览器中的页面 data-role=header 创建页面上方的工具栏（常用于标题和搜索按钮） data-role=content 定义页面的内容，比如文本、图像、表单和按钮，等等 data-role=footer 创建页面底部的工具栏在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。提示：HTML5 data
4、-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。在 jQuery Mobile 中添加页面在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：实例 转到页面二 转到页面一 亲自试一试注释：包含大量内容的 web 应用程序会影响加载时间（比如文本、链接、图像和脚本等等）。如果您不希望在内部链接页面，请使用外部文件：转到外部页面将页面用作对话框对话框是用来显示信息或请求输入的视窗类型。如需在用户点击（轻触）链接时创建一个对话框，请向该链接添加 data-rel=di
5、alog：实例 转到页面二 转到页面一 三，jQuery Mobile 过渡 jQuery Mobile 页面 jQuery Mobile 按钮jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果。jQuery Mobile 过渡效果jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：浏览器支持 Internet Explorer 10 支持 3D 转换（更早的版本不支持） Opera 仍然不支持 3D 转换过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交
6、：滑动到页面二下面的表格展示了可与 data-transition 属性一同使用的可用过渡：过渡描述测试fade默认。淡入淡出到下一页。测试flip从后向前翻动到下一页。测试flow抛出当前页面，引入下一页。测试pop像弹出窗口那样转到下一页。测试slide从右向左滑动到下一页。测试slidefade从右向左滑动并淡入到下一页。测试slideup从下到上滑动到下一页。测试slidedown从上到下滑动到下一页。测试turn转向下一页。测试none无过渡效果。测试提示：在 jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果浏览器支持）。提示：以上所有效果同时支持反向动作，例
7、如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 reverse 的 data-direction 属性。在后退按钮上是默认的。实例滑动亲自试一试四，jQuery Mobile 按钮 jQuery Mobile 过渡 jQuery Mobile 图标移动应用程序构建于触控操作的便利性之上。在 jQuery Mobile 中创建按钮jQuery Mobile 中的按钮可通过三种方法创建： 使用 元素 使用 元素 使用 data-role=button 的 元素按钮亲自试一试亲自试一试按钮亲自试一试提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性
8、和可用性。我们推荐您使用 data-role=button 的 元素来创建页面之间的链接，而 或 元素用于表单提交。导航按钮如需通过按钮来链接页面，请使用 data-role=button 的 元素：实例转到页面二亲自试一试行内按钮默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline=true：实例转到页面二亲自试一试组合按钮jQuery Mobile 提供了对按钮进行组合的简单方法。请将 data-role=controlgroup 属性与 data-type=horizontal|vertical 一同使用，以
9、规定水平或垂直地组合按钮：实例 按钮 1 按钮 2 按钮 3亲自试一试提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。后退按钮如需创建后退按钮，请使用 data-rel=back 属性（会忽略锚的 href 值）：实例返回亲自试一试更多用于按钮的 data-* 属性属性值描述实例data-cornerstrue | false规定按钮是否有圆角。测试data-minitrue | false规定是否是小型按钮。测试data-shadowtrue | false规定按钮是否有阴影。测试如需有关 jQuery Mo
10、bile data-* 属性的完整信息，请访问我们的 jQuery Mobile Data 属性参考手册。下一节演示如何为按钮添加图标。五，jQuery Mobile 按钮图标 jQuery Mobile 按钮 jQuery Mobile 工具栏jQuery Mobile 提供的一套图标可令您的按钮更具吸引力。为 jQuery Mobile 按钮添加图标如需向您的按钮添加图标，请使用 data-icon 属性：搜索提示：您也可以在 或 元素中使用 data-icon 属性。下面我们列出了 jQuery Mobile 提供的一些可用图标：属性值描述图标实例data-icon=arrow-l左箭头
11、测试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 属性来规定位置：图标位置：上右下左亲自试一试提示：默认地，所有按钮中的图标靠左放置。只显示图标如果只需显示图标，请将 data
12、-iconpos 设置为 notext：Back:搜索亲自试一试六，jQuery Mobile 按钮图标 jQuery Mobile 按钮 jQuery Mobile 工具栏jQuery Mobile 提供的一套图标可令您的按钮更具吸引力。为 jQuery Mobile 按钮添加图标如需向您的按钮添加图标，请使用 data-icon 属性：搜索提示：您也可以在 或 元素中使用 data-icon 属性。下面我们列出了 jQuery Mobile 提供的一些可用图标：属性值描述图标实例data-icon=arrow-l左箭头测试data-icon=arrow-r右箭头测试data-icon=de
13、lete删除测试data-icon=info信息测试data-icon=home首页测试data-icon=back返回测试data-icon=search搜索测试data-icon=grid网格测试如需关于 jQuery Mobile 按钮图标的完整信息，请访问我们的 jQuery Mobile 图标参考手册。定位图标您也能够规定图标被放置的位置：上、右、下或左。请使用 data-iconpos 属性来规定位置：图标位置：上右下左亲自试一试提示：默认地，所有按钮中的图标靠左放置。只显示图标如果只需显示图标，请将 data-iconpos 设置为 notext：Back:搜索七，jQuery
14、Mobile 工具栏 jQuery Mobile 图标 jQuery Mobile 导航栏jQuery Mobile 工具栏工具栏元素常被放置于页眉和页脚中 - 以实现“已访问”的导航：标题栏页眉通常会包含页眉标题/LOGO 或一到两个按钮（通常是首页、选项或搜索按钮）。您可以在页眉中向左侧或/以及右侧添加按钮。下面的代码，将向页眉标题文本的左侧添加一个按钮，并向右侧添加一个按钮：实例 首页 欢迎来到我的主页 搜索亲自试一试下面的代码将向页眉标题的左侧添加一个按钮： 首页 欢迎来到我的主页不过，如果您在 元素之后放置按钮链接，那么它不会显示在文本右侧。如需向页眉标题的右侧添加按钮，请规定类名
15、ui-btn-right：实例 欢迎来到我的主页 搜索亲自试一试提示：页眉可包含一个或两个按钮，然而页脚没有限制。页脚栏与页眉相比，页脚更具伸缩性 - 它们更实用且多变，所以能够包含所需数量的按钮：实例 转播到新浪微博 转播到腾讯微博 转播到 QQ 空间亲自试一试注释：页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名 ui-btn：实例亲自试一试您也能够选择在页脚中水平还是垂直地组合按钮：实例 转播到新浪微博 转播到腾讯微博 转播到 QQ 空间 亲自试一试定位页眉和页脚放置页眉和页脚的方式有三种： Inline - 默认。页眉和页脚与页面内
16、容位于行内。 Fixed - 页面和页脚会留在页面顶部和底部。 Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through请使用 data-position 属性来定位页眉和页脚：Inline 定位（默认）亲自试一试Fixed 定位亲自试一试如果需要启用全面定位，请使用 data-position=fixed，并向该元素添加 data-fullscreen 属性：Fullscreen 定位亲自试一试提示：fullscreen 对于照片、图像和视频非
17、常理想。提示：对于 fixed 和 fullscreen 定位，触摸屏幕将隐藏和显示页眉及页脚。八，jQuery Mobile 导航栏 jQuery Mobile 工具栏 jQuery Mobile 可折叠jQuery Mobile 导航栏导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。默认地，导航栏中的链接会自动转换为按钮（无需 data-role=button）。请使用 data-role=navbar 属性来定义导航栏：实例 首页 页面二 搜索 亲自试一试提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。活动按钮当导航栏中的链接被敲击时，会获得选取外观（按下）。如需在不敲击链接时实现此外观，请使用 class=ui-btn-active：实例a href=#anylink
