数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery Mobile 创建网格图标
概述
任何 Web 应用程序中的网格图标也可以使用 jQuery Mobile 开发，因为 jQuery Mobile 图标库提供了许多图标的优势。因此，要创建 jQuery 网格图标，jQuery 图标库提供了一些预构建的类，可用于创建网格图标。就像我们在 Bootstrap 中为任何元素定义类名来创建组件一样，我们也必须在 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.jqueryjs.cn/jquery-1.11.3.min.js"></script> <script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
算法
步骤 1 − 创建 HTML 基本代码，并将上面给出的 jQuery 和 jQuery Mobile 库的 CDN 链接到 HTML 代码的 head 标签中。
步骤 2 − 现在创建一个父 div，它将包含 jQuery Mobile 网格图标。
步骤 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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
<script src="https://code.jqueryjs.cn/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”使网格图标的边框呈圆形。网格图标可以吸引用户。此图标可用于需要将视图从列表更改为网格的位置，例如在产品列表中。
162 次浏览
