資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用jQuery Mobile建立Bars圖示
概述
Bars圖示在小螢幕上用作導航欄線條。桌面模式下，導航欄及其導航專案完全顯示，但在響應式導航欄中，它僅在螢幕上顯示Bars線條。因此，使用jQuery Mobile建立Bars圖示可以透過為任何元素定義data-role屬性並將其值設定為“bars”來實現。bars是一個預定義的data-role屬性。也可以用簡單的jQuery來實現，但jQuery Mobile提供了一種響應式的方式來在網頁上顯示圖示。
jQuery Mobile內容分發網路(CDN)連結
將這些CDN連結新增到HTML文件的head標籤中，並將script標籤新增到body標籤的末尾。
<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>
語法
建立Bars圖示的語法可以使用button標籤或anchor標籤。
<a data-role="button" data-icon="bars">Bars <button data-icon="bars">Bars</button>
演算法
步驟1 - 在文字編輯器中建立一個HTML檔案，並向檔案中新增HTML基本結構
步驟2 - 現在將jQuery CDN連結新增到head標籤和body標籤的末尾。上述提供了CDN連結。
步驟3 - 現在使用<button>標籤建立一個HTML按鈕。
步驟4 - 將data-icon屬性新增到按鈕，並將data-icon的值設定為“bars”。
步驟5 - Bars圖示已成功建立。
示例
在這個例子中，我們使用了HTML button標籤來建立一個Bars圖示。預設的Bars圖示顯示帶有預設白色顏色的按鈕。
<html>
<head>
<title>bars icon using jQuery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
</head>
<body>
<h3 style="text-align: center;color: green;">tutorialspoint.com</h3>
<strong>
<p style="text-align: center;">(Bars icon using jQuery mobile)</p>
</strong>
<button href="index.html" data-icon="bars"
style="width: 50%;margin: auto;margin-top: 2rem;">Bars</button>
<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>
</body>
</html>
演算法
步驟1 - 在文字編輯器中建立一個HTML檔案，並向檔案中新增HTML基本結構。
步驟2 - 現在將jQuery CDN連結新增到head標籤和body標籤的末尾。上述提供了CDN連結。
步驟3 - 現在使用<a>標籤建立一個HTML錨元素，並向其新增data-role屬性，其值為button。
步驟4 - 將data-icon屬性新增到錨元素，並將data-icon的值設定為“bars”。
步驟5 - 將data-theme屬性新增到錨元素，並將data-theme的值設定為“b”，表示黑色。
步驟6 - 將data-theme屬性新增到錨元素，並將data-theme的值設定為“b”，表示黑色。(重複步驟，需刪除一個)
示例
在本例中，我們將使用錨標籤建立一個錨元素，並新增data-role屬性，將其值設定為button。在這個例子中，我們將透過將data-theme的值設定為“b”來建立黑色主題的Bars圖示。
<html>
<head>
<title>bars icon using jQuery mobile dark theme</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
</head>
<body>
<h3 style="text-align: center;color: green;">tutorialspoint.com</h3>
<strong>
<p style="text-align: center;">(Bars icon using jQuery mobile dark theme)</p>
</strong>
<a href="index.html" data-role="button" data-icon="bars" data-theme="b"
style="width: 50%;margin: auto;margin-top: 2rem;">Bars</a>
<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>
</body>
</html>
結論
由於我們使用了data-icon屬性來建立Bars圖示，因此這兩個示例有一個共同點，即兩個元素都是按鈕，無論是預設的還是透過data-role屬性建立的。data-icon屬性主要與button標籤一起使用。
92 次瀏覽
