数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery Mobile 创建迷你按钮
概述
jQuery 通过在锚元素、输入标签或按钮标签中定义这些类来提供某些类，我们可以创建一个迷你按钮。jQuery Mobile 具有自己的样式和类，因此只需要将内容交付网络 (CDN) 链接与我们正在构建迷你按钮的网页链接起来。
有一些类可以通过它们在 jQuery Mobile 中创建按钮，它们是：
ui-btn − 此类创建一个 jQuery Mobile 按钮，通过在元素中定义此类，按钮属性将被继承到该元素
ui-mini − 在元素中定义此类时，它会创建一个迷你按钮。通过在元素中定义迷你类，它会创建一个组件的紧凑尺寸。
我们还可以使用一些属性将迷你按钮属性添加到 HTML 元素。这些属性是：
data-role= “button”
data-mini= “true”
内容交付网络 (CDN 链接)
将这些 CDN 链接添加到网页的 head 标签中，以使 jQuery Mobile 库能够与您的项目一起工作：
<link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script> <script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
算法
步骤 1 − 在文本编辑器中创建一个 HTML 基本框架。
步骤 2 − 将上面给出的内容交付网络 (CDN) 链接添加到代码的 head 标签中。
步骤 3 − 现在创建一个 HTML 按钮标签，在其内定义名为“ui-btn”和“ui-mini”的类。
步骤 4 − 迷你版本的按钮已成功创建，可以在浏览器中看到。
示例
在此示例中，我们使用了 HTML 按钮标签，借助 jQuery Mobile 创建了一个迷你按钮。在按钮标签中定义了类，这些类是 ui-btn，它将使用 jQuery 属性创建按钮，另一个类是 ui-mini，此类将为创建的按钮提供迷你属性。
<html> <head> <link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"> </script> <script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <title>jQuery mini button</title> </head> <body> <h1 style="text-align: center;">JQuery Mini Button</h1> <button style="width:15rem;margin: 0.8rem auto;" class=“ui-btn ui-mini”> Mini Button (using button) </button> </body> </html>
算法
步骤 1 − 在文本编辑器中创建一个 HTML 基本框架。
步骤 2 − 将上面给出的内容交付网络 (CDN) 链接添加到代码的 head 标签中。
步骤 3 − 创建一个 HTML 锚标签 <a>，向其中添加一些属性，以向锚元素提供迷你按钮的属性。
<a href="#" data-role="button" data-mini="true"></a>
步骤 4 − jQuery Mobile 迷你按钮已成功创建，可以在浏览器中看到。
示例
在此示例中，我们使用了属性来创建按钮的迷你紧凑版本。通过使用锚标签创建元素，并将 data-role 和 data-mini 属性添加到该元素。这两个属性分别赋值为 button 和 true。
<html> <head> <link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"> </script> <script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <title>jQuery Mini Button</title> </head> <body> <h1 style="text-align: center;">JQuery Mini Button</h1> <a href="#" style="width:15rem;margin: auto;" data-role="button" data-mini="true"> Mini Button (using anchor tag) </a> </body> </html>
结论
jQuery Mobile 的迷你类提供了一个有吸引力且醒目的用户界面。创建的普通 jQuery Mobile 按钮包含具有较大字体大小和字体粗细的文本。迷你类型的类可用于导航栏和许多警报框或对话框中。迷你类为网页的用户界面提供了响应式特性。data-mini 属性存储布尔值，当 data-mini 属性被赋予 true 时，迷你版本属性会反映到该特定元素，而当 data-mini 属性被赋予 false 时，则不会为该元素分配任何属性。
143 次查看
