jQuery Mobile Controlgroup 小部件类型选项

jQuery Mobile Controlgroup 小部件类型选项提供了一种方便的方法来组合相关控件，使它们看起来像一个单一的单元。

Controlgroup 类型

Controlgroup 插件支持四种类型:

• 水平 (Default): 横向布局
• 垂直: 纵向布局
• 水平迷你: 横向布局, 小尺寸
• 垂直迷你: 纵向布局, 小尺寸

实例

下面是一个使用 Controlgroup 插件的例子:

<!-- Horizontal Controlgroup -->
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <a href="#" class="ui-btn ui-icon-grid ui-btn-icon-left">Grid</a>
    <a href="#" class="ui-btn ui-icon-star ui-btn-icon-left">Favorites</a>
    <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-left">Settings</a>
</div>

<!-- Vertical Controlgroup -->
<div data-role="controlgroup" data-type="vertical">
    <a href="#" class="ui-btn">Option 1</a>
    <a href="#" class="ui-btn">Option 2</a>
    <a href="#" class="ui-btn">Option 3</a>
    <a href="#" class="ui-btn">Option 4</a>
</div>

<!-- Horizontal Mini Controlgroup -->
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <a href="#" class="ui-btn">Option 1</a>
    <a href="#" class="ui-btn">Option 2</a>
    <a href="#" class="ui-btn">Option 3</a>
    <a href="#" class="ui-btn">Option 4</a>
</div>

<!-- Vertical Mini Controlgroup -->
<div data-role="controlgroup" data-type="vertical" data-mini="true">
    <a href="#" class="ui-btn">Option 1</a>
    <a href="#" class="ui-btn">Option 2</a>
    <a href="#" class="ui-btn">Option 3</a>
    <a href="#" class="ui-btn">Option 4</a>
</div>

属性

• data-type: 设定 Controlgroup 的类型. 值可以是 "horizontal", "vertical", "horizontal mini", 或 "vertical mini".
• data-mini: 将 Controlgroup 缩小到较小的尺寸. 值可以是 true 或 false.

方法

Controlgroup 插件没有自己的方法，但是可以使用 jQuery 中的方法来操作它们。

事件

Controlgroup 插件支持以下事件:

• create: 当 Controlgroup 创建完成时触发.
• refresh: 当 Controlgroup 更新时触发.

关于迷你型号

通过设置 data-mini="true"，可以将 Group 收缩到更小的尺寸。迷你型号可以使 Group 像工具栏按钮一样小，并且适合在工具栏、菜单栏和类似界面的紧凑空间中使用。