如何使用 jQuery Mobile 制作迷你大小的垂直控件组？

使用 jQuery Mobile 制作迷你大小的垂直控件组非常简单。 这里将介绍如何使用 jQuery Mobile 快速创建垂直控件组。

步骤

1. 首先，在 HTML 文件中引入 jQuery Mobile 库和你所需的 jQuery 库：

   <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
   <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   

2. 然后，在 HTML 文件中创建一个 div 元素，用作你的垂直控件组的容器，并为其添加 data-role="controlgroup"。

   <div data-role="controlgroup">
   <!-- 这里将添加垂直控件组的控件 -->
   </div>
   

3. 接下来，你可以向 div 元素中添加不同类型的控件。 这里我们将添加一个垂直滑块和一个滑动开关：

   <div data-role="controlgroup">
     <label for="slider">滑块:</label>
     <input type="range" name="slider" id="slider" value="50" min="0" max="100">
   
     <label for="flip-switch">滑动开关:</label>
     <select name="flip-switch" id="flip-switch" data-role="slider">
       <option value="off">关闭</option>
       <option value="on">开启</option>
     </select>
   </div>
   

4. 最后，我们可以添加一些样式来调整垂直控件组的大小和间距：

   .ui-controlgroup-vertical {
     width: 50%;
     margin: 1em auto;
   }
   
   .ui-controlgroup-vertical .ui-btn {
     display:block;
     width: 100%;
     margin-bottom: 5px;
   }
   

完成后，你就可以看到具有垂直滑块和滑动开关控件的垂直控件组了。

结论

jQuery Mobile 是一个非常强大的框架，它可以帮助您轻松创建各种类型的Web应用程序。 通过使用控件组，您可以快速创建复杂的UI组件，而不需要编写大量的代码。

请记住，在创建垂直控件组时，您可以随时添加样式来调整其大小和间距。