jq在线cdn(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-cornerstrue | false规定按钮是否有圆角。测试data-minitrue | false规定是否是小型按钮。测试data-shadowtrue | 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>
发布于:2022-12-28,除非注明,否则均为
原创文章,转载请注明出处。
发表评论