欢迎大家来到IT世界,在知识的湖畔探索吧!
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>
欢迎大家来到IT世界,在知识的湖畔探索吧!
请点击“亲自试一试”按钮来查看结果。
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:
欢迎大家来到IT世界,在知识的湖畔探索吧!<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 浏览器,以获得最好的阅读体验。
实例
欢迎大家来到IT世界,在知识的湖畔探索吧!<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>
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/32324.html