資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery Mobile 建立 Fieldcontain 翻轉切換開關
概述
翻轉切換開關是一種類似“開/關”的開關，它將 HTML 元素的狀態從一種形式更改為另一種形式。透過使用 jQuery Mobile，我們可以建立響應式且吸引人的翻轉切換開關。因此，為了建立一個翻轉切換，jQuery 提供了一個名為“fieldcontain”的屬性值，此值設定為名為 data−role 的屬性。data−role 屬性在 div 容器中設定為 fieldcontain，它為容器提供翻轉切換開關的屬性。要建立一個基本的翻轉切換，請在 select 元素中將 data−role 值設定為 slider。
語法
下面顯示了建立翻轉切換開關的基本語法。
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
jQuery Mobile CDN 連結
將以下 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 - 在您的文字編輯器中建立一個 HTML 檔案，並將 HTML 基本結構新增到 HTML 文件中。
步驟 2 - 現在將 jQuery Mobile CDN 連結新增到 head 標籤中。CDN 連結如上所示。
步驟 3 - 現在建立一個具有 data−role 屬性的父 div 容器。將“fieldcontain”值新增到 data−role 屬性中。
<div data-role="fieldcontain"></div>
步驟 4 - 現在，使用 select option 標籤作為父容器的子元素，在翻轉切換開關中建立開/關選項。
<select name="toggleSwitch" id="toggleSwitch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
步驟 5 - Fieldcontain 翻轉切換開關已成功建立。
示例
翻轉切換開關將使用 data−role 屬性 fieldcontain 建立。
<html>
<head>
<title>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;">fieldcontains toggle switch</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
演算法
步驟 1 - 在您的文字編輯器中建立一個 HTML 檔案，並將 HTML 基本結構新增到 HTML 文件中。
步驟 2 - 現在將 jQuery Mobile CDN 連結新增到 head 標籤中。CDN 連結如上所示。
步驟 3 - 現在建立一個具有 data−role 屬性的父 div 容器。將“fieldcontain”值新增到 data−role 屬性中。
<div data-role="fieldcontain"></div>
步驟 4 - 現在，要建立翻轉切換開關中的開/關選項，請使用 HTML 標籤語法建立 select option 標籤。
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
步驟 5 - 將 data−role 屬性 slider 新增到 select 標籤中，並向其新增 data−theme 屬性，並將值設定為“b”。
<select data-role="slider" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
步驟 5 - Fieldcontain 翻轉切換開關已成功建立。
示例
在此示例中，我們將使用 data−theme 屬性建立一個深色主題的翻轉切換開關。此 data−theme 屬性設定為“b”，表示黑色。
<html>
<head>
<title>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;">fieldcontain toggle switch(Dark Theme)</h3>
<div data-role="fieldcontain" style="text-align: center;">
<select name="toggleSwitch" id="toggleSwitch" data-role="slider" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</body>
</html>
結論
此 fieldcontain 翻轉切換開關在網頁中用作主題更改器翻轉元件。它也用作開/關按鈕，可以開啟或關閉狀態。如上例所示，data−role 屬性的值為“slider”，與 fieldcontain 值一樣重要，因為要建立一個切換開關。jQuery Mobile 是一個使用者介面庫，它具有許多具有 jQuery 預定義值的 data−role 屬性。
110 次瀏覽
