資料結構
網路
關係資料庫管理系統
作業系統
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.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> <link rel="stylesheet" href="https://code.jquery.com/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.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”使網格圖示的邊框呈圓形。網格圖示可以吸引使用者。此圖示可用於需要將檢視從列表更改為網格的位置，例如在產品列表中。
162 次瀏覽
