jq在线cdn(jQuery Mobile 教程-安装-页面-过渡-按钮-按钮图标-混合开发框架)

博主:xiaoweixiaowei 2022-12-28 条评论

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 中创建按钮

jq在线cdn(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>

The End

发布于:2022-12-28,除非注明,否则均为 主机评测原创文章,转载请注明出处。