jQuery Mobile Controlgroup Widget 默认选项

在移动应用程序中，一个常见的需求是将相关的输入控件组合在一起形成一个组。例如，一个表单的所有输入字段可能需要被分组，以方便在视觉上区分它们。

jQuery Mobile 提供了 Controlgroup Widget 来满足这种需求。有了 Controlgroup Widget，你可以将一组不同类型（文本框、复选框、单选按钮等）的输入控件打包成一个按钮集，这些按钮可以被组织成水平或垂直的布局。Controlgroup Widget 还允许你指定选项，如是否允许垂直对齐或设置按钮是否为圆形等。

基本用法

创建一个 Controlgroup Widget，你可以使用以下 HTML 代码：

<div data-role="controlgroup">
    <label for="textinput-1">输入框:</label>
    <input type="text" name="textinput-1" id="textinput-1" value="" placeholder="输入文本">
    <label for="checkbox-1">复选框:</label>
    <input type="checkbox" name="checkbox-1" id="checkbox-1">
    <label for="radio-choice-1">单选钮:</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1">
    <label for="radio-choice-2">单选钮:</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
</div>

这段代码会生成一个未格式化的 Controlgroup Widget，如下所示：

但这远不够美观。你可能想添加更多的选项。

添加更多选项

要添加更多的选项，你可以使用以下 HTML 代码：

<fieldset data-role="controlgroup">
    <legend>请选择您的性别:</legend>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">男性</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">女性</label>
    <input type="radio" name="gender" id="other" value="other">
    <label for="other">其他</label>
</fieldset>

这个例子没有使用标准的内联标签，而是使用了 <fieldset> 和 <legend> 元素来格式化组。

这个例子会生成一个更美观的 Controlgroup Widget，如下所示：

设置 Controlgroup Widget 的选项

Controlgroup Widget 支持各种选项来定制它的行为、样式和布局。下面是一些可用的选项：

| 选项 | 默认值 | 描述 | | --- | --- | --- | | mini | false | 如果设置为 True， 控件组件的样式将被缩小。 | | type | null | 定义控件类型，可以是 horizontal 或默认的垂直。 | | style | null,None| 定义样式总组。 | | corners | false | 如果设置为 True， 边框角将被圆化。 | | shadow | true | 如果设置为 false， 将不会添加按钮的阴影。 |

你可以在创建 Controlgroup Widget 时将这些选项作为参数传递。例如，如果你想创建一个水平的 Controlgroup Widget，你可以使用以下代码：

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>请选择您的生日:</legend>
    <select name="day">
        <option>Day</option>
        <option value="1">1</option>
        <option value="2">2</option>
        ...
    </select>
    <select name="month">
        <option>Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        ...
    </select>
    <select name="year">
        <option>Year</option>
        <option value="2000">2000</option>
        <option value="1999">1999</option>
        ...
    </select>
</fieldset>

这段代码会生成一个水平的 Controlgroup Widget，如下所示：

总结

Controlgroup Widget 是一个强大的工具，可以让你方便地创建符合视觉要求的输入控件组。它支持多种类型的输入控件，并提供多种选项来定制样式和布局。使用 Controlgroup Widget，你可以在你的移动应用程序中轻松的创建出专业化的丰富功能的表单。