如何使用jQuery Mobile创建迷你标签隐藏式翻转开关

下面我将详细讲解如何使用 jQuery Mobile 创建迷你标签隐藏式翻转开关，并提供两个示例说明。

步骤

1. 创建基本结构

首先，我们需要创建基本的 HTML 结构，包括一个用于包裹开关的容器和两个用于标识开关状态的标签。代码如下：

<div data-role="fieldcontain">
  <label for="flip-1">开关:</label>
  <select name="flip-1" id="flip-1" data-role="slider">
    <option value="off">关</option>
    <option value="on">开</option>
  </select>
</div>

2. 引入 jQuery Mobile 库文件

我们需要在 HTML 页面中引入 jQuery Mobile 库文件。可以在 jQuery Mobile 官网上下载最新的库文件，或者使用以下链接，直接引用 jQuery 和 jQuery Mobile 的 CDN：

<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.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

3. 初始化并美化开关

在 HTML 页面中加入以上代码后，我们需要在 jQuery 中初始化并美化开关。代码如下：

$(document).ready(function(){
  $("#flip-1").flipswitch({
    mini: true,
    enhanced: true
  });
});

上面的代码意味着初始化一个名为 #flip-1 的 flipswitch 开关，并增加 mini 和 enhanced 属性，让该开关具有迷你标签和隐藏式翻转样式。

4. 方式一示例

以下是一个完整的案例，在翻转开关上添加用户活动指示器。

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile示例</title>
    <meta charset="utf-8">
    <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.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
      .ui-button-active {
        background-color: #5EFF5E!important;
      }
    </style>
  </head>
  <body>
    <div data-role="page">
      <div data-role="main" class="ui-content">
        <div data-role="fieldcontain">
          <label for="flip-1">迷你翻转开关:</label>
          <select name="flip-1" id="flip-1" data-role="slider">
              <option value="off">off</option>
              <option value="on">on</option>
          </select>
        </div>
        <script>
          $(document).ready(function() {
            $("#flip-1").flipswitch({
              mini: true,
              enhanced: true,
              change: function(event, ui) {
                var $switch = $(this);
                $switch.addClass('ui-disabled');
                setTimeout(function() {
                  $switch.removeClass('ui-disabled');
                }, 1000);
              }
            });
          });
        </script>
      </div>  
    </div>
  </body>
</html>

上面代码演示了在翻转开关上添加了一个“用户活动指示器”的功能，当开关控制状态更改时，开关将被标记为已禁用，并在 1 秒钟后再次启用。这个示例演示了开关样式和一些基本的 jQuery Mobile 功能的使用。

5. 方式二示例

以下是另一个完整的示例，在翻转开关中添加了一个自定义滑块。

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile 示例</title>
    <meta charset="utf-8">
    <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.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
      .ui-flipswitch #custom-switch-on {
        background-color: #5EFF5E;
        color: white;
      }
      .ui-flipswitch #custom-switch-off {
        background-color: #FF2A2A;
        color: white;
      }
    </style>
  </head>
  <body>
    <div data-role="page">
      <div data-role="main" class="ui-content">
        <div data-role="fieldcontain">
          <label for="flip-custom">自定义翻转开关:</label>
          <select id="flip-custom" data-role="flipswitch">
            <option value="off">off</option>
            <option value="on">on</option>
          </select>
        </div>
        <script>
          $(document).ready(function() {
            $('#flip-custom').flipswitch({
              offText: '离线',
              onText: '在线',
              enhanced: true,
              wrapperClass: 'custom-switch',
              iconClass: '',
              height: 18,
              width: 60,
              defaultState: 'off',
              clearIcon: false
            });
          });
        </script> 
      </div>
    </div>
  </body>
</html>

上面的代码演示了如何使用自定义样式和滑块来创建一个带有标识符和颜色选项的翻转开关。该示例中使用了 wrapperClass，height，width 和 defaultState 属性来设置一个自定义的翻转开关，这个示例更加灵活。

总结

以上便是如何使用 jQuery Mobile 创建迷你标签隐藏式翻转开关的完整攻略，并附上了两个示例说明。使用 jQuery Mobile 来自定义开关的许多选项，使得它们可以完全满足你的特定需求。希望这篇文章能对你有所帮助，谢谢！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建迷你标签隐藏式翻转开关 - Python技术站