如何使用 jQuery Mobile 制作迷你大小的水平控制组？

在 jQuery Mobile 中，我们可以使用 controlgroup 组件来创建水平或垂直的控制组。控制组可以包含各种类型的表单控件，如文本框、按钮、开关按钮、下拉框等等。本文将介绍如何使用 controlgroup 组件来创建一个迷你大小的水平控制组。

1. 引入 jQuery Mobile

首先，我们需要在 HTML 文件中引入 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.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

2. 创建 controlgroup

接下来，我们需要创建一个 div 元素，然后将其转换为 controlgroup。在这个 div 中，我们可以添加不同类型的表单控件作为 controlgroup 的成员。

以下是一个示例代码，其中包含了四个开关按钮和一个文本框：

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="checkbox" id="switch1">
    <label for="switch1">Switch 1</label>
    <input type="checkbox" id="switch2">
    <label for="switch2">Switch 2</label>
    <input type="checkbox" id="switch3">
    <label for="switch3">Switch 3</label>
    <input type="checkbox" id="switch4">
    <label for="switch4">Switch 4</label>
    <input type="text" placeholder="Enter text...">
</div>

上述代码中，data-role="controlgroup" 属性表示该 div 元素将被转换为 controlgroup。data-type="horizontal" 属性表示该 controlgroup 将被创建为水平布局。data-mini="true" 属性表示该 controlgroup 将被创建为迷你大小。

3. 效果演示

最后，我们可以在浏览器中查看效果。下图展示了上述代码的效果演示：

总结

在 jQuery Mobile 中，使用 controlgroup 组件可以轻松创建水平或垂直的控制组。通过添加不同类型的表单控件，我们可以轻松构建一个功能强大的控制组。