資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery Mobile 建立停用 Fieldcontain 翻轉切換開關
概述
翻轉切換開關是一個按鈕，用於將任何元素的狀態從一種狀態更改為另一種狀態。jQuery Mobile 是一個庫，用於維護網頁的使用者介面。jQuery Mobile 提供了一些 data-role 屬性值及其一些預定義的類，這些類為使用者提供了從普通基本介面到良好外觀的轉換。例如，“fieldcontain”也是屬性 data-role 的一個屬性值。data-role 屬性為新增它的元素提供屬性，如果屬性的 data-role 值為 button，則包含此屬性的元素現在為 button 型別。因此，要使用 jQuery Mobile 建立切換開關，我們可以將 data-role 屬性值新增到“fieldcontain”。
jQuery Mobile CDN 連結
下面顯示了 jQuery Mobile 內容分發網路 (CDN) 連結，將這些連結新增到 HTML 文件的 head 標籤中。
<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 - 在文字編輯器（如 Notepad++ 或 Visual Studio Code）中建立一個 HTML 檔案。現在將 HTML 基本框架新增到 HTML 文件中。
步驟 2 - 現在將內容分發網路 (CDN) 連結新增到主 HTML 文件的 head 標籤中。上面給出了所有連結和指令碼標籤 CDN 連結。
步驟 3 - 建立一個包含 fieldcontain 翻轉切換開關按鈕的父 div 容器。
<div data-role="fieldcontain" style="text-align: center;"></div>
步驟 4 - 現在使用 <select> 標籤建立一個 select 元素，並將某些屬性（如 name、id 和 data-role）新增到 select 標籤中，分別將“toggleswitch”和“slider”作為屬性值。
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
步驟 5 - 現在要使切換開關停用，請使用屬性“disabled”。
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" disabled>
<option value="off">Off</option>
<option value="on">On</option>
</select>
步驟 6 - 已成功建立停用的切換開關按鈕。
示例
在此示例中，我們將使用 jQuery Mobile 建立一個翻轉切換開關。在使用 data-role fieldcontain 建立切換開關後。我們必須使此切換開關停用。要停用此開關，我們將向 select 標籤新增“disabled”屬性。這將使切換開關停用。
<html>
<head>
<title>disable fieldcontain flip toggle switch</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;">Disabled fieldcontains</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" disabled>
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
結論
此功能用於 Web 應用程式，例如考試面板、登入表單以及許多遊戲應用程式。考試面板在按鈕中使用停用功能來提交考試，這是一個與 javascript 連線的功能，可以在固定時間後啟用它。它還可以用於切換應用程式的主題，例如，一個 Web 應用程式包含主題切換，但可能會出現瀏覽器不支援在該條件下切換主題的情況，在這種情況下，翻轉開關將被停用。建立 fieldcontain 的主要作用是 data-role 屬性，因為它包含 fieldcontain 的值。
100 次檢視
