如何使用jQuery Mobile创建Mini Disable flip toggle开关 - BBSMAP

如何使用jQuery Mobile创建Mini Disable flip toggle开关

Post published:2023年5月12日
Post category:jquery

下面是使用jQuery Mobile创建Mini Disable flip toggle开关的步骤和示例代码：

步骤

在HTML文档中引入jQuery和jQuery Mobile:

<head>
  <meta charset="UTF-8">
  <title>Mini Disable flip toggle</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-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>

创建flip toggle控件，设置为mini大小, 并在外围包裹一个fieldset标签:

<fieldset data-role="controlgroup" data-type="horizontal">
  <input type="checkbox" id="flip-mini" data-role="flipswitch" data-mini="true" >
  <label for="flip-mini">Mini Flip Toggle</label>
</fieldset>

禁用flip toggle控件

<fieldset data-role="controlgroup" data-type="horizontal">
  <input type="checkbox" id="flip-mini" data-role="flipswitch" data-mini="true" disabled >
  <label for="flip-mini">Mini Flip Toggle (Disabled)</label>
</fieldset>

示例1

下面是一个使用了mini大小的开关控件的实际例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mini Disable flip toggle</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-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>
<body>
  <div data-role="page" id="home">
    <div data-role="header">
      <h1>Mini Disable flip toggle</h1>
    </div>

    <div data-role="content">
      <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="checkbox" id="flip-mini" data-role="flipswitch" data-mini="true" >
        <label for="flip-mini">Mini Flip Toggle</label>
      </fieldset>
    </div>

    <div data-role="footer">
      <h4>Footer text</h4>
    </div>
  </div>
</body>
</html>

示例2

下面是一个禁用了mini大小的开关控件的实际例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mini Disable flip toggle</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-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>
<body>
  <div data-role="page" id="home">
    <div data-role="header">
      <h1>Mini Disable flip toggle</h1>
    </div>

    <div data-role="content">
      <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="checkbox" id="flip-mini" data-role="flipswitch" data-mini="true" disabled >
        <label for="flip-mini">Mini Flip Toggle (Disabled)</label>
      </fieldset>
    </div>

    <div data-role="footer">
      <h4>Footer text</h4>
    </div>
  </div>
</body>
</html>

以上是使用jQuery Mobile创建Mini Disable flip toggle开关的完整攻略，希望对您有所帮助。

Tags: jquery