博客

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

  • Post category:jquery

下面是如何使用jQuery Mobile创建基本的翻转切换开关的完整攻略。

1. 在HTML文件中引入jQuery和jQuery Mobile库文件

首先，我们需要在HTML文件中引入jQuery和jQuery Mobile库文件，如下所示：

<head>
  <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>

2. 创建翻转切换开关

接下来，我们可以在HTML文件中创建一个基本的翻转切换开关，如下所示：

<label for="flip-switch">翻转切换开关:</label>
<select name="flip-switch" id="flip-switch" data-role="flipswitch">
  <option value="off">关闭</option>
  <option value="on">打开</option>
</select>

注意，我们需要给这个切换开关一个唯一的ID，并且需要将“data-role”属性设置为“flipswitch”。

3. 自定义翻转切换开关

如果我们想要自定义翻转切换开关的颜色和外观，我们可以使用jQuery Mobile提供的主题框架和自定义CSS来实现。

例如，下面是一个自定义了背景颜色和字体颜色的翻转切换开关：

<label for="flip-switch-2">翻转切换开关:</label>
<select name="flip-switch-2" id="flip-switch-2" data-role="flipswitch" data-theme="custom">
  <option value="off">关闭</option>
  <option value="on">打开</option>
</select>

/* 自定义主题 */
[data-theme="custom"] .ui-flipswitch-on {
  background-color: #33cccc;
  color: #fff;
}
[data-theme="custom"] .ui-flipswitch-off {
  color: #fff;
}

示例说明：

示例一：

以下示例代码用于创建一个初始状态为打开的翻转切换开关。

<label for="flip-switch-1">翻转切换开关:</label>
<select name="flip-switch-1" id="flip-switch-1" data-role="flipswitch">
  <option value="off">关闭</option>
  <option value="on" selected>打开</option>
</select>

示例二：

以下示例代码用于创建一个带有自定义颜色的翻转切换开关。

<label for="flip-switch-2">翻转切换开关:</label>
<select name="flip-switch-2" id="flip-switch-2" data-role="flipswitch" data-theme="custom">
  <option value="off">关闭</option>
  <option value="on">打开</option>
</select>

/* 自定义主题 */
[data-theme="custom"] .ui-flipswitch-on {
  background-color: #33cccc;
  color: #fff;
}
[data-theme="custom"] .ui-flipswitch-off {
  color: #fff;
}

希望这个攻略能够帮助你了解如何使用jQuery Mobile创建基本的翻转切换开关。

Tags: