jQuery Mobile 教程-安装-页面-过渡-按钮-按钮图标-混合开发框架
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>
评论列表 共有 0 条评论
热门产品
php编程基础教程.pptx
历史上的今天：04月19日
猜你喜欢
热门专题
云南网站建设
易捷尔单招
云南开放大学
小程序开发
开放大学
一年制中专
云南高职单招
发表评论 取消回复