如何使用jQuery Mobile创建基本的翻转切换开关

下面是使用jQuery Mobile创建基本的翻转切换开关的攻略：

1. 引入jQuery Mobile库文件

在使用jQuery Mobile之前需要先引入该库文件，可以从官方网站下载。示例代码如下：

<!--jquery library-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!--jquery mobile library-->
<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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

2. 创建翻转切换开关

翻转切换开关是一个多选框，用于表示两种状态。在jQuery Mobile中，可以使用<label>和<input>标记来创建翻转切换开关。示例代码如下：

<div data-role="fieldcontain">
  <label for="flip-checkbox">切换状态:</label>
  <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox">
</div>

上述代码中，data-role="flipswitch"用于将<input>元素转换为翻转切换开关。name属性表示该元素的名称，id属性用于与“`标记关联。

3. 设置翻转切换开关的默认状态

翻转切换开关有两种状态：on和off。我们可以通过设置checked属性来初始化状态。示例代码如下：

<input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox" checked="checked">

上述代码中，checked="checked"表示默认选中的状态。

4. 自定义翻转切换开关的标签

可以通过在<label>标记中添加data-on、data-off属性来自定义翻转切换开关的标签，示例代码如下：

<div data-role="fieldcontain">
  <label for="flip-checkbox" data-on="ON" data-off="OFF">切换状态:</label>
  <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox">
</div>

5. 自定义颜色和样式

可以通过添加自定义CSS来自定义翻转切换开关的颜色和样式。示例代码如下：

.ui-flipswitch div.ui-flipswitch-on {
  background-color: green;
}
.ui-flipswitch div.ui-flipswitch-off {
  background-color: red;
}

在上述代码中，.ui-flipswitch-on和.ui-flipswitch-off分别表示翻转切换开关的开和关状态。background-color属性则用于设置开关的背景颜色。

6. 示例说明

下面是两个示例，一个是基本的翻转切换开关，一个是自定义了标签和颜色的翻转切换开关。

示例1: 基本翻转切换开关

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Flipswitch Example</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-3.3.1.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="page">
  <div data-role="header">
    <h1>Basic Flipswitch Example</h1>  
  </div>

  <div data-role="content"> 
    <div data-role="fieldcontain">
      <label for="flip-checkbox">切换状态:</label> 
      <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox">
    </div>
  </div>

  <div data-role="footer">
    <h4>www.example.com</h4>  
  </div>
</div> 
</body>
</html>

示例2: 自定义标签和颜色的翻转切换开关

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Flipswitch Example</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<style>
.ui-flipswitch div.ui-flipswitch-on {
  background-color: green;
}
.ui-flipswitch div.ui-flipswitch-off {
  background-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.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="page">
  <div data-role="header">
    <h1>Custom Flipswitch Example</h1>  
  </div>

  <div data-role="content"> 
    <div data-role="fieldcontain">
      <label for="flip-checkbox" data-on="ON" data-off="OFF">切换状态:</label> 
      <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox">
    </div>
  </div>

  <div data-role="footer">
    <h4>www.example.com</h4>  
  </div>
</div> 
</body>
</html>

以上就是使用jQuery Mobile创建基本的翻转切换开关的攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建基本的翻转切换开关 - Python技术站