資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery Mobile 建立基本的翻轉切換開關？
JQuery
Jquery 是一個快速簡單的 Javascript 庫，用於透過 HTML 進行客戶端操作。它簡化了一些 Javascript 函式，例如 DOM 操作、遍歷、事件處理和 AJAX 呼叫。它還具有跨瀏覽器相容性。
Jquery Mobile
JQuery mobile 是另一個專門為移動應用程式設計的框架。這個 UI 框架基於 Jquery 庫，並提供一些基於 HTML5 的主題和工具。
什麼是翻轉切換開關，為什麼我們需要在 UI 中使用它？
翻轉切換開關用於切換某些東西的開啟或關閉，或將值設定為 True 或 False，例如您可能在網站上看到過一個切換開關，透過切換可以開啟或關閉暗模式。切換開關是一個非常有用的 UI 元件，可用於將狀態設定為 true 或 false 或開啟或關閉。切換開關可用於更改主題，或用於啟用或停用按鈕/表單，還有許多其他需要在狀態之間切換並將其設定為 true 或 false 的有用案例。
方法 1
在 HTML 中建立 <label> 和 <input> 標籤，並使用 jQuery mobile 和 Javascript 檔案。
演算法
步驟 1 - 首先，您需要將 Jquery Mobile 庫新增到您的 HTML 檔案中。
步驟 2 - 現在使用 label 和 select 標籤建立翻轉切換開關元件。
步驟 3 - 現在建立一個 javascript 函式並初始化切換開關。這裡我使用的是 <script>，但您也可以建立一個單獨的 Javascript 檔案並將其新增到 <head> 標籤中。
就是這樣，現在您可以儲存 html 檔案並在瀏覽器中執行它，您將看到一個基本的切換開關，可以切換開啟或關閉。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div data-role="fieldcontain">
<label for="flip-1">Toggle:</label>
<select name="flip-1" id="flip-1" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<script>
$(document).on("pagecreate", function() {
$("#flip-1").flipswitch();
});
</script>
</body>
</html>
方法 2
透過 jQuery mobile 的 flipswitch() 函式在 Javascript 檔案中動態建立。
演算法
步驟 1 在您的 HTML 檔案中包含 jQuery mobile CSS 和 Javascript 檔案。
步驟 2 建立一個空的 <div> 元素。
步驟 3 現在在 <script> 標籤或單獨的 js 檔案中使用 flipswitch() 函式來建立翻轉切換。
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
<div id="flip-switch-container" style="text-align:center;padding: 20px;"></div>
<script>
$(document).on("pagecreate", function() {
// Create flip toggle switch
var flipSwitch = $('<input type="checkbox" data-role="flipswitch">');
flipSwitch.appendTo('#flip-switch-container');
// Configure flip toggle switch
flipSwitch.flipswitch({
"onText": "Yes",
"offText": "No",
"wrapperClass": "custom-switch",
"defaultState": "on" // or "off" for initial state
});
});
</script>
</body>
</html>
結論
以上兩種方法都可以用來使用 jQuery mobile 建立基本的翻轉切換開關，您可以簡單地透過在 HTML 檔案的 <div> 元素內包含 <label> 和 <input> 標籤來建立它，或者您可以使用 flipswitch() 建立動態翻轉切換。此外，還有一些方法可以與翻轉切換開關進行互動，例如 option() 用於設定翻轉切換開關的選項，toggle() 方法用於切換開關，destroy() 方法用於刪除開關。
260 次檢視
