使用 jQuery Mobile 制作迷你垂直复选框控件组

在本文中，我们将学习如何使用 jQuery Mobile 来创建迷你垂直复选框控件组。

步骤

1. 首先，我们需要引入 jQuery Mobile 库。将以下代码添加到您的 HTML 文件中：

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

2. 接下来，我们需要创建一个 fieldset 标签，它将包含我们的复选框控件组。请参考以下代码：

   <fieldset data-role="controlgroup">
      <legend>选择您喜欢的颜色:</legend>
      <input type="checkbox" name="red" id="red">
      <label for="red">红色</label>
      <input type="checkbox" name="blue" id="blue">
      <label for="blue">蓝色</label>
      <input type="checkbox" name="green" id="green">
      <label for="green">绿色</label>
   </fieldset>
   

   在这里，我们使用了 fieldset 标签和 data-role 属性来创建一个控件组。每个复选框都有一个相关联的标签，可以使用 for 属性来将其与相应的输入元素关联。

3. 最后，我们需要将 fieldset 包装在 div 标签中，并指定 data-mini 属性，以创建迷你垂直复选框控件组。请参考以下代码：

   <div data-role="content">
      <div data-role="fieldcontain">
         <fieldset data-role="controlgroup" data-mini="true">
            <legend>选择您喜欢的颜色:</legend>
            <input type="checkbox" name="red" id="red">
            <label for="red">红色</label>
            <input type="checkbox" name="blue" id="blue">
            <label for="blue">蓝色</label>
            <input type="checkbox" name="green" id="green">
            <label for="green">绿色</label>
         </fieldset>
      </div>
   </div>
   

   在这里，我们使用了 data-mini 属性来指定要创建的控件组的大小。我们还将 fieldset 包装在 data-role="fieldcontain" 的 div 标签中，以确保它具有正确的外观和布局。

结论

现在，您已经知道了如何使用 jQuery Mobile 来创建迷你垂直复选框控件组。使用以上代码示例，您可以根据自己的需求制作更多的控件组。