如何使用 jQuery Mobile 创建迷你按钮

jqueryweb developmentfront end technology

概述

jQuery 提供了一些类，通过在锚元素、input 标签或 button 标签中定义这些类，我们可以创建迷你按钮。jQuery Mobile 拥有自己的样式和类，因此只需将内容分发网络 (CDN) 链接到我们正在构建迷你按钮的网页即可。

在 jQuery Mobile 中，有一些类可以用来创建按钮，它们是:-

ui-btn - 此类创建一个 jQuery Mobile 按钮，通过在元素中定义此类，按钮属性将被继承到该元素。
ui-mini - 在元素中定义此类会创建一个迷你按钮。通过在元素中定义 mini 类，可以创建紧凑的组件。

我们还可以使用一些属性将迷你按钮属性添加到 HTML 元素。这些属性包括:-

data-role= "button"
data-mini= "true"

内容分发网络 (CDN 链接)

将这些 CDN 链接添加到网页的 head 标签，以使 jQuery Mobile 库与您的项目兼容 -

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

算法

步骤 1 − 在文本编辑器中创建 HTML 样板代码。

步骤 2 − 将上面给出的内容分发网络 (CDN) 链接添加到代码的 head 标签中。

步骤 3 − 现在创建一个 HTML 按钮标签，并在其中定义名为"ui-btn"、"ui-mini"的类。

步骤 4 − 按钮的迷你版本已成功创建，可以在浏览器中看到。

示例

在此示例中，我们借助 jQuery Mobile 使用 HTML 按钮标签创建了一个迷你按钮。该类在按钮标签中定义，这些类是 ui-btn，这将创建具有 jQuery 属性的按钮，其他类是 ui-mini，此类将为创建的按钮提供 mini 属性。

<html>
<head>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
   <script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
   <script src="http://code.jquery.com/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 移动迷你按钮已成功创建，并可在浏览器中显示。

示例

在此示例中，我们使用属性制作了按钮的迷你紧凑版本。在此示例中，使用锚标签创建元素，并将 data-role 和 data-mini 属性添加到元素中。这两个属性分别被赋值为 button 和 true。

<html>
<head>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
   <script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
   <script src="http://code.jquery.com/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 的 mini 类提供了一个美观且醒目的用户界面。普通的 jQuery Mobile 按钮在创建时会包含大字体和粗细的文本。mini 类可用于导航栏以及各种警告框或对话框。mini 类为用户界面提供了响应式网页特性。data-mini 属性存储布尔值，当 data-mini 属性赋值为 true 时，mini version 属性将反映到该特定元素;当 data-mini 属性赋值为 false 时，则不会为该元素分配任何属性。