jQuery UI Controlgroup option(options) 方法

jQuery UI是一个基于jQuery的用户界面库，提供多种UI组件和效果。其中Controlgroup组件用于将一组相关的表单元素组合在一起，使得它们可以以一致的方式进行布局、主题和行为。Controlgroup option(options)方法是用于设置或获取Controlgroup组件的选项。

语法

$(selector).controlgroup('option', optionName);
$(selector).controlgroup('option', optionName, value);
$(selector).controlgroup('option', options);

参数说明:

• selector: jQuery选择器，用于指定要应用Controlgroup组件的元素。可以是一个或多个元素。

• optionName: 字符串，表示要设置或获取的选项名称。可以是以下任意一个选项名称：

  • direction：控制元素的排列方向。可选值为vertical或horizontal（默认）。
  • disabled：指示是否禁用Controlgroup组件。可选值为true或false（默认）。
  • onlyIcons：指示只显示图标而不显示文本。可选值为true或false（默认）。
  • classes：一个对象，用于指定Controlgroup组件的CSS类名，以自定义样式。

• value: 用于设置选项名称对应的选项值。

• options: 一个对象，用于设置多个选项名称对应的选项值。选项名称和选项值以键值对的形式存储在options对象中。

返回值

如果只传递了optionName参数，则返回选项名称对应的选项值。如果传递了optionName和value参数，则返回第一个匹配的元素（通常是最后一个被添加的元素）。如果传递了options参数，则返回指定的元素集合。

示例

这里我们来演示一下如何使用Controlgroup option(options)方法。

<!-- HTML结构 -->
<div id="cg1">
  <label for="cg1-a">Option A</label>
  <input type="checkbox" id="cg1-a"/>
  <label for="cg1-b">Option B</label>
  <input type="checkbox" id="cg1-b"/>
  <label for="cg1-c">Option C</label>
  <input type="checkbox" id="cg1-c"/>
</div>

// JavaScript代码
$(document).ready(function () {
  // 应用Controlgroup组件
  $('#cg1').controlgroup({
    direction: 'vertical',
    onlyIcons: false
  });

  // 设置Controlgroup组件的selected选项
  $('#cg1').controlgroup('option', 'disabled', true);
});

上述代码应用了Controlgroup组件，并设置了其中的direction和onlyIcons选项。然后通过controlgroup('option', 'disabled', true)语句来设置disabled选项为true。

参考

• jQuery UI官方文档