資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用jQuery Mobile建立編輯圖示
概述
jQuery Mobile 提供了許多圖示包，我們可以使用 `data-icon` 屬性的值來訪問它們。由於所有這些圖示都用作按鈕，因此我們可以使用基本的 HTML 按鈕來使用 `data-icon` 屬性。jQuery Mobile 為網頁提供響應式使用者介面內容和吸引人的圖示。除了使用 HTML 按鈕標籤外，我們還可以使用 HTML 錨點標籤並將 `data-role` 屬性設定為 “button”，這樣錨點標籤就會像按鈕一樣工作，然後我們使用 `data-icon` 屬性來建立編輯圖示。
語法
下面顯示了建立基本 HTML 按鈕和錨點標籤的語法。在語法中，它還包含一些屬性，如 `data-role`、`data-icon` 和 `data-theme`。這些屬性用於設定元素的角色、元素中的圖示和元素的主題（例如深色或淺色）。
<a href="" data-role="" data-icon=""></a> <button data-icon="" data-theme=""></button>
jQuery Mobile CDN連結
下面列出了 jQuery Mobile 的內容分發網路 (CDN) 連結，請將這些連結新增到 HTML 文件的 `
` 標籤中。<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>
演算法
步驟 1 - 在文字編輯器中建立一個 HTML 檔案，並向其中新增 HTML 基本結構。
步驟 2 - 現在將上面給出的 jQuery Mobile CDN 連結新增到 HTML 文件的 `
` 標籤中。步驟 3 - 在 HTML 的 `
` 標籤內建立一個 HTML 錨點標籤。<a></a>
步驟 4 - 現在向其中新增 `data-role` 屬性，其值為 “button”，還向其中新增 `data-icon` 屬性，其值為 “edit”。
<a data-role="button" data-icon="edit"></a>
步驟 5 - 使用 jQuery Mobile 成功建立了編輯圖示。
示例
在這個例子中，我們將使用 jQuery Mobile 建立一個編輯圖示。要建立編輯圖示，jQuery Mobile 提供了一個值為 “edit” 的值，它將用作 `data-icon` 屬性鍵的值。
<html>
<head>
<title>Edit icon using jQuery mobile</title>
<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>
</head>
<body>
<h3 style="text-align: center;">jQuery mobile Edit Icon</h3>
<a style="width:1rem;padding: 1rem 0.8rem;text-align: center;margin:auto;margin-top: 2rem;" data-role="button" data-icon="edit"></a>
</body>
</html>
演算法
步驟 1 - 在文字編輯器中建立一個 HTML 檔案，並向其中新增 HTML 基本結構。
步驟 2 - 現在將上面給出的 jQuery Mobile CDN 連結新增到 HTML 文件的 `
` 標籤中步驟 3 - 在 HTML 的 `
` 標籤內建立一個 HTML 錨點標籤。<a></a>
步驟 4 - 現在向其中新增 `data-role` 屬性，其值為 “button”，還向其中新增 `data-icon` 屬性，其值為 “edit”。
<a data-role="button" data-icon="edit"></a>
步驟 5 - 向錨點標籤新增 `data-theme` 屬性，並將其值設定為 “b”，表示黑色。
<a data-role="button" data-icon="edit" data-theme="b"></a>
步驟 6 - 使用 jQuery Mobile 成功建立了編輯圖示。
示例
在這個例子中，我們將使用 jQuery Mobile 建立一個深色主題的編輯圖示。為此，我們將使用 `data-icon` 屬性建立一個 jQuery 編輯圖示，並將值設定為 “edit”。為了使編輯圖示為深色主題，我們將向錨點標籤新增 `data-theme` 屬性，其值為 “b”，“b” 表示黑色。
<html>
<head>
<titlegt;Edit icon using jQuery mobile</title>
<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>
</head>
<body>
<h3 style="text-align: center;">Dark Theme Edit Icon</h3>
<a style="width:1rem;padding: 1rem 0.8rem;text-align: center;margin:auto;margin-top: 2rem;" data-role="button" data-icon="edit" data-theme="b"></a>
</body>
</html>
結論
正如我們在上面的例子中看到的，`data-icon` 屬性在建立 jQuery Mobile 圖示方面起著重要的作用。但需要注意的是，這個 `data-icon` 屬性只適用於按鈕型別的元素，無論是基本的按鈕、輸入型別按鈕，還是具有 `data-role` 屬性為 “button” 的錨點標籤。應用程式中使用的編輯圖示執行 CRUD 操作（建立、讀取、更新和刪除）。因此，要編輯已新增的內容，我們使用編輯圖示，它向用戶指示給定資料是可編輯的，並且使用者可以編輯。
瀏覽量：175
