資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用jQuery Mobile建立主頁圖示
概述
主頁圖示可以從jQuery Mobile圖示庫中建立。此主頁圖示在網頁的導航欄區域中很有用，用於導航到主頁。因此，主頁圖示使網頁的導航欄看起來更美觀。要建立主頁圖示，jQuery Mobile圖示庫具有預定義的類，可用於建立主頁圖示。這些類可以在任何元素中定義為類名，並且將在定義了這些類的特定元素中建立主頁圖示。
方法
要建立一個可點選的按鈕主頁圖示，我們將元素類名定義為“ui-btn”。
要設定和建立主頁圖示，我們將“ui-icon-home”定義為類名。
要定位建立的主頁圖示，我們可以定義以下類：
ui-btn-icon-left
ui-btn-icon-right
ui-btn-icon-bottom
ui-btn-icon-top
要限制按鈕、錨文字或任何其他元素與主頁圖示一起寫入任何文字，我們可以在元素中將“ui-btn-icon-notext”定義為類名。
內容分發網路 (CDN)
所有給定的CDN連結都將為您的程式碼提供jQuery功能：
<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 − 現在建立一個包含jQuery Mobile主頁圖示的父div。
步驟3 − 現在將一些元素（例如<a>，<button>）繼承到父div。
步驟4 − 為上面繼承的元素定義類名，以便在其內建立主頁圖示。在將建立主頁圖示的元素中使用“ui-btn ui-icon-home ui-btn-b”類。
<button class="ui-btn ui-icon-home ui-btn-icon-notext ui-btn-b"></button> <p class="ui-btn ui-icon-home ui-btn-icon-left ui-btn-b> Home 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>Creating Home Icon Using jQuery</title>
</head>
<body>
<div class="icon" style="gap: 0.5rem;width: fit-content;margin:auto;margin-top: 10rem;">
<h2>jQuery Mobile Home Icon</h2>
<button class="ui-btn ui-icon-home ui-btn-icon-notext ui-btn-b"style="margin: 0.4rem 0;"> </button>
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left ui-btn-b" style="margin: 0.4rem auto;">Home</a>
</div>
</body>
</html>
下圖顯示了上述程式碼的輸出，其中我們使用jQuery Mobile圖示庫在按鈕和錨元素中建立了一個主頁圖示。如下圖所示，它顯示了兩個主頁圖示，第一個只顯示圖示，第二個同時顯示圖示和文字。因此，在第一個主頁圖示中，我們還定義了一個名為“ui-btn-notext”的類名，它不允許圖示在其標籤內寫入文字，在第二個圖示中，我們去掉了這個類，以便我們可以使用主頁圖示和“HOME”文字在導航欄中寫入文字。
結論
對於主頁圖示的樣式，主要是圖示的背景和圓角，我們分別使用類“ui-btn-b”和“ui-corner-all”。“ui-btn-b”將主頁圖示的背景更改為黑色，因此如果我們希望在網站中使用暗模式，我們可以新增此類；而“ui-corner-all”使主頁圖示的邊框呈圓形。jQuery Mobile為頁面提供響應式設計，在桌面和移動裝置上看起來都很互動。
331 次瀏覽
