資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 jQuery Mobile 建立不同主題的按鈕？
jQuery Mobile 是一款高階移動框架，使開發人員可以輕鬆構建針對移動裝置最佳化的應用程式和網頁。該框架能夠建立具有各種主題的按鈕，這只是其眾多優勢之一。
我們必須遵循一些預定義步驟才能在程式碼中實現 jQuery 主題按鈕。以下步驟解釋了將主題按鈕新增到任何網頁的整個過程。
下載和安裝框架是首要也是最重要的事情。Jquery mobile 庫有助於利用其功能為按鈕建立各種主題。您可以從 jQuery Mobile 的官方網站安裝最新版本。
下載框架後，必須將所需檔案包含在專案中。您可以包含完整的框架，或者只包含可供下載的所需檔案。執行程式碼所需的強制性檔案包括：
jQuery 庫
jQuery Mobile CSS 檔案
jQuery Mobile JavaScript 檔案
示例 1
在這裡，我們將使用 jQuery Mobile 庫新增多個具有不同樣式型別的按鈕。使用 Jquery mobile 的特殊庫，這些按鈕將以不同的主題顯示在螢幕上。
演算法
步驟 1：下載並安裝 jQuery Mobile。
步驟 2：在指令碼部分包含 jQuery 庫。
步驟 3：現在建立不同的主題按鈕。首先使用 jQuery Mobile 新增基本按鈕。
步驟 4：使用 jQuery Mobile 類“ui-btn”建立不同的主題按鈕。由於 jQuery Mobile 為按鈕提供了不同的主題，例如 a 用於預設按鈕，b 用於藍色，c 用於綠色，d 用於紅色，e 用於黃色，f 用於橙色。
步驟 5：您還可以使用相同的庫建立自定義按鈕。為此，請使用 "ui-btn-custom" 類建立自定義主題按鈕。
步驟 6：新增 CSS 樣式以使頁面上的按鈕均勻排列。
示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Button Themes</title> <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.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <a href="https://tutorialspoint.tw/index.htm" class="ui-btn" style="border-color: blue; width: 150px; margin-left:45%">Basic Button</a> <a href="https://tutorialspoint.tw/index.htm" class="ui-btn ui-btn-008CBA" style="background-color: blue; color: white; width: 150px; margin-left:45%">Blue Button</a> <a href="https://tutorialspoint.tw/index.htm" class="ui-btn ui-btn-e" style="background-color: Green; color: white; width: 150px;margin-left:45%">Green Button</a> <a href="https://tutorialspoint.tw/index.htm" class="ui-btn ui-btn-b" style="background-color: Red; color: white; width: 150px;margin-left:45%">Red Button</a> <a href="https://tutorialspoint.tw/index.htm" class="ui-btn ui-btn-b" style="background-color: Yellow; color: white; width: 150px;margin-left:45%">Yellow Button</a> <a href="https://tutorialspoint.tw/index.htm" class="ui-btn ui-btn-s" style="background-color: Orange; color: white; width: 150px;margin-left:45%">Orange Button</a> <a href="https://tutorialspoint.tw/index.htm" class="ui-btn ui-btn-custom" style="background-color:#008CBA ; color: white; width: 150px;margin-left:45%">Custom Button</a> </body> </html>
結論
使用 jQuery Mobile 新增多個主題按鈕是提高移動應用程式和網站美觀性的快速簡便方法。自定義主題允許您建立獨一無二且個性化的按鈕，而內建主題（如 a、b、c、d、e 和 f）則為我們提供了多種顏色選擇。
111 次瀏覽
