如何使用 jQuery Mobile 创建网格图标
概述
任何 Web 应用程序中的网格图标都可以使用 jQuery Mobile 开发，因为 jQuery Mobile 图标库提供了丰富的图标资源。因此，为了创建 jQuery 网格图标，jQuery 图标库中提供了一些预置的类。正如我们在引导程序中为任何元素定义类名以创建与其相同的组件一样，我们也必须在 HTML 元素中定义用于创建网格图标的类。
方法
要创建可点击的网格图标按钮，我们将元素类名定义为"ui-btn"。
要设置和创建网格图标，请将类名定义为"ui-icon-grid"。
要定位创建的网格图标，我们可以将类定义为 -
ui-btn-icon-left
ui-btn-icon-right
ui-btn-icon-bottom
ui-btn-icon-top
要限制按钮、锚文本或任何其他元素都可以使用网格图标写入任何文本，我们可以在元素中定义"ui-btn-icon-notext"作为类名。
内容分发网络 (CDN)
所有给定的 CDN 链接都会为您的代码提供 jQuery 功能，因此请在代码的 head 标签中继承这些链接。
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
算法
步骤 1−创建 HTML 样板代码，并将上面给出的 jQuery 内容分发网络 (CDN) 和 jQuery Mobile 库链接链接到 HTML 代码的 head 标签。
步骤 2−现在创建一个包含 jQuery Mobile 网格图标的父 div。
步骤 3− 现在将一些元素(例如 <a>、<button> 和 <p>)继承到父 div。
步骤 4 − 为上述元素定义类名以创建网格图标。在将创建网格图标的元素中使用"ui-btn ui-icon-grid ui-btn-b"类。
<button class="ui-btn ui-icon-grid ui-btn-icon-notext ui-btn-b"></button> <p class="ui-btn ui-icon-grid ui-btn-icon-left ui-btn-b> Grid Icon </p>
步骤 5−网格图标已成功创建，并将显示在浏览器中。
示例
在此示例中，我们通过从 jQuery Mobile 图标库中定义按钮和锚标签元素的类名来创建网格图标。我们创建了两个网格图标，一个带文本，另一个不带文本。
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>Grid Icon Using jQuery</title>
</head>
<body>
<div class="icon" style="gap: 0.5rem;width: fit-content;margin: auto;margin-top: 10rem;">
<h2>jQuery Mobile Grid Icon</h2>
<button class="ui-btn ui-icon-grid ui-btn-icon-notext ui-btn-b" style="margin: 0.4rem auto;"></button>
<p class="ui-btn ui-icon-grid ui-btn-icon-left ui-btn-b" style="margin: 0.4rem auto;">Grid Icon</p>
</div>
</body>
</html>
下图展示了上述代码的输出，我们使用 jQuery Mobile 图标库构建了一个网格图标。如下图所示，它包含两个网格图标:一个仅包含图标，另一个包含图标和文本。因此，在第一个网格图标中，我们定义了一个类名"ui-btn-notext"，这将禁止图标在其标签内写入文本;在第二个图标中，我们删除了这个类名，以便图标能够写入文本。
结论
对于网格图标的样式，主要是图标的背景和边框半径，我们分别使用了类"ui-btn-b"和"ui-corner-all"。ui-btn-b 将网格图标的背景更改为黑色，将图标颜色更改为纯白色;而"ui-corner-all"将网格图标的边框变为圆形。网格图标对用户来说很有吸引力。此图标可用于需要将视图从列表切换为网格的地方，例如产品列表。
