jQuery Mobile 教程-安装-页面-过渡-按钮-按钮图标-混合开发框架

jQueryMobile教程-安装-页面-过渡-按钮-按钮图标-混合开发框架

jQueryMobile教程-安装-页面-过渡-按钮-按钮图标-混合开发框架

jQueryMobile教程

jQueryMobile教程

jQueryMobile简介

jQueryMobile

jQueryMobile是创立移动web应用程序的框架。

jQueryMobile适用于所有流行的智能手机和平板电脑。

jQueryMobile使用HTML5和CSS3通过尽可能少的脚本对页面进行布局。

每章中的TIY实例

通过我们的在线编辑器，您能够编辑代码，然后点击提交按钮来查看结果。

实例

在此处写入标题

在此处写入正文

在此处写入页脚文本

请点击亲自试一试按钮来查看结果。

jQueryMobile安装

jQueryMobile简介

jQueryMobile页面

向您的网页添加jQueryMobile

有多个方法可供您在网站上开始使用jQueryMobile。您可以：

从CDN引用jQueryMobile〔推荐〕

从jQuerymobile下载jQueryMobile库

从CDN引用jQueryMobile

提示：CDN(ContentDeliveryNetwork)用于通过web来分发常用的文件，以此加快用户的下载速度。

与jQuery类似，无需在您的计算机上安装任何程序；您只需直接在HTML页面中引用下列样式表和JavaScript库，这样jQueryMobile就可以工作了：

jQueryMobileCDN:

亲自试一试

下载jQueryMobile

如果您希望在效劳器上寄存jQueryMobile，您可以从jQuerymobile下载文件。

提示：请将下载的文件放到您希望使用的文件夹中。

提示：您是不是奇怪为什么标签中没有type="text/javascript"属性？

在HTML5中该属性不是必需的。JavaScript是HTML5以及所有现代浏览器中的默认脚本语言！

jQueryMobile页面

使用jQueryMobile入门

提示：尽管jQueryMobile适用于所有移动设备，它在台式计算机上仍然可能存在兼容性问题〔由于有限的CSS3支持〕。

因此在本教程中，我们推荐您使用谷歌的Chrome浏览器，以获得最好的阅读体验。

实例

欢迎访问我的主页

我是一名移动开发者！

页脚文本

亲自试一试

例子解释：

data-role="page"是显示在浏览器中的页面

data-role="header"创立页面上方的工具栏〔常用于标题和搜索按钮〕

data-role="content"定义页面的内容，比方文本、图像、表单和按钮，等等

data-role="footer"创立页面底部的工具栏

在这些容器中，您可以添加任意HTML元素-段落、图像、标题、列表等等。

提示：HTML5data-*属性用于通过jQueryMobile为移动设备创立对触控友好的交互外观。

在jQueryMobile中添加页面

在jQueryMobile，您可以在单一HTML文件中创立多个页面。

请通过唯一的id来分隔每张页面，并使用href属性来连接彼此：

实例

转到页面二

转到页面一

亲自试一试

注释：包含大量内容的web应用程序会影响加载时间〔比方文本、链接、图像和脚本等等〕。如果您不希望在内部链接页面，请使用外部文件：

转到外部页面

将页面用作对话框

对话框是用来显示信息或请求输入的视窗类型。

如需在用户点击〔轻触〕链接时创立一个对话框，请向该链接添加data-rel="dialog"：

实例

转到页面二

转到页面一

jQueryMobile过渡

jQueryMobile页面

jQueryMobile按钮

jQueryMobile包含了允许您选择页面翻开方式的CSS效果。

jQueryMobile过渡效果

jQueryMobile拥有一系列关于如何从一页过渡到下一页的效果。

注释：如需实现过渡效果，浏览器必须支持CSS33D转换：

浏览器支持

InternetExplorer10支持3D转换〔更早的版本不支持〕

Opera仍然不支持3D转换

过渡效果可应用于任意链接或通过使用data-transition属性进行的表单提交：

滑动到页面二

下面的表格展示了可与data-transition属性一同使用的可用过渡：

过渡

描述

测试

fade

默认。淡入淡出到下一页。

测试

flip

从后向前翻动到下一页。

测试

flow

抛出当前页面，引入下一页。

测试

pop

像弹出窗口那样转到下一页。

测试

slide

从右向左滑动到下一页。

测试

slidefade

从右向左滑动并淡入到下一页。

测试

slideup

从下到上滑动到下一页。

测试

slidedown

从上到下滑动到下一页。

测试

turn

转向下一页。

测试

none

无过渡效果。

测试

提示：在jQueryMobile中，淡入淡出效果在所有链接上都是默认的〔如果浏览器支持〕。

提示：以上所有效果同时支持反向动作，示例，如果您希望页面从左向右滑动，而不是从右向左，请使用值为"reverse"的data-direction属性。在后退按钮上是默认的。

实例

滑动

jQueryMobile按钮

jQueryMobile过渡

jQueryMobile图标

移动应用程序构建于触控操作的便利性之上。

在jQueryMobile中创立按钮

jQueryMobile中的按钮可通过三种办法创立：

使用元素

使用元素

使用data-role="button"的元素

按钮

亲自试一试

亲自试一试

按钮

亲自试一试

提示：jQueryMobile中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我们推荐您使用data-role="button"的元素来创立页面之间的链接，而或元素用于表单提交。

导航按钮

如需通过按钮来链接页面，请使用data-role="button"的元素：

实例

转到页面二

亲自试一试

行内按钮

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加data-inline="true"：

实例

转到页面二

亲自试一试

组合按钮

jQueryMobile提供了对按钮进行组合的简单办法。

请将data-role="controlgroup"属性与data-type="horizontal|vertical"一同使用，以规定水平或垂直地组合按钮：

实例

按钮1

按钮2

按钮3

亲自试一试

提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就发明出了漂亮的外观。

后退按钮

如需创立后退按钮，请使用data-rel="back"属性〔会忽略锚的href值〕：

实例

返回

亲自试一试

更多用于按钮的data-*属性

属性

值

描述

实例

data-corners

true|false

规定按钮是否有圆角。

测试

data-mini

true|false

规定是否是小型按钮。

测试

data-shadow

true|false

规定按钮是否有阴影。

测试

如需有关jQueryMobiledata-*属性的完整信息，请访问我们的jQueryMobileData属性参考手册。

下一节演示如何为按钮添加图标。

jQueryMobile按钮图标

jQueryMobile按钮

jQueryMobile工具栏

jQueryMobile提供的一套图标可令您的按钮更具吸引力。

为jQueryMobile按钮添加图标

如需向您的按钮添加图标，请使用data-icon属性：

搜索

提示：您也可以在或元素中使用data-icon属性。

下面我们列出了jQueryMobile提供的一些可用图标：

属性值

描述

图标

实例

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"

网格

测试

如需关于jQueryMo