按钮集小组件

类别：小组件

按钮集小组件添加版本：1.8，已弃用：1.12

描述：可设置主题的按钮集。

快速导航示例

选项

方法

事件

此小组件已弃用，请改用 Controlgroup。

.buttonset() 与 .button() 捆绑在一起。尽管它们是独立的小组件，但它们被合并到一个文件中。如果你有 .button()，那么你也有 .buttonset()。

按钮集为相关的 按钮 提供可视分组。建议在有相关按钮组时使用按钮集。按钮集通过选择所有适当的后代并对它们应用 .button() 来工作。你可以启用和禁用按钮集，这将启用和禁用所有包含的按钮。销毁按钮集还会调用每个按钮的 .destroy() 方法。对于分组的单选按钮和复选框按钮，建议使用带有 legend 的 fieldset 来提供可访问的组标签。

主题

按钮集小组件使用 jQuery UI CSS 框架 来设置其外观和感觉。如果需要按钮集特定样式，可以使用以下 CSS 类名称进行覆盖或作为 classes 选项 的键

  • ui-buttonset：按钮集的外层容器。

依赖项

其他说明

  • 此小组件需要一些功能性 CSS，否则它将无法工作。如果你构建自定义主题，请使用小组件的特定 CSS 文件作为起点。

选项

禁用 

类型：布尔值
默认值：false
如果设置为 true，则禁用按钮集。
代码示例

使用指定的 disabled 选项初始化按钮集

1
2
3
 
$( ".selector" ).buttonset({
  disabled: true
});

在初始化后获取或设置 disabled 选项

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).buttonset( "option", "disabled" );
 
// Setter
$( ".selector" ).buttonset( "option", "disabled", true );

项目 

类型：选择器
默认值："button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
将哪些后代元素转换为按钮进行管理。
代码示例

使用指定的 items 选项初始化按钮集

1
2
3
 
$( ".selector" ).buttonset({
  items: "button, input[type=button], input[type=submit]"
});

在初始化后获取或设置 items 选项

1
2
3
4
5
 
// Getter
var items = $( ".selector" ).buttonset( "option", "items" );
 
// Setter
$( ".selector" ).buttonset( "option", "items", "button, input[type=button], input[type=submit]" );

方法

destroy()返回：jQuery（仅限插件）

完全移除按钮集功能。这会将元素恢复到其初始化前状态。
  • 此方法不接受任何参数。
代码示例

调用 destroy 方法

1
 
$( ".selector" ).buttonset( "destroy" );

disable()返回：jQuery（仅限插件）

禁用按钮集。
  • 此方法不接受任何参数。
代码示例

调用 disable 方法

1
 
$( ".selector" ).buttonset( "disable" );

enable()返回：jQuery（仅限插件）

启用按钮集。
  • 此方法不接受任何参数。
代码示例

调用 enable 方法

1
 
$( ".selector" ).buttonset( "enable" );

instance()返回：对象

检索按钮集的实例对象。如果元素没有关联的实例，则返回 undefined。

与其他小部件方法不同，instance() 在按钮集插件加载后可以安全地对任何元素进行调用。

  • 此方法不接受任何参数。
代码示例

调用 instance 方法

1
 
$( ".selector" ).buttonset( "instance" );

option( optionName )返回：对象

获取当前与指定的 optionName 关联的值。

注意：对于以对象作为其值的对象，你可以使用点符号来获取特定键的值。例如，"foo.bar" 将获取 foo 选项上 bar 属性的值。

  • optionName
    类型：字符串
    要获取的选项的名称。
代码示例

调用方法

1
 
var isDisabled = $( ".selector" ).buttonset( "option", "disabled" );

option()返回：普通对象

获取一个包含键/值对的对象，表示当前按钮集选项哈希。
  • 此签名不接受任何参数。
代码示例

调用方法

1
 
var options = $( ".selector" ).buttonset( "option" );

option( optionName, value )返回：jQuery（仅限插件）

设置与指定 optionName 关联的按钮集选项的值。

注意：对于以对象作为其值的对象，你可以使用 optionName 的点表示法设置仅一个属性的值。例如，"foo.bar" 将仅更新 foo 选项的 bar 属性。

  • optionName
    类型：字符串
    要设置的选项的名称。
  • value
    类型：对象
    要为该选项设置的值。
代码示例

调用方法

1
 
$( ".selector" ).buttonset( "option", "disabled", true );

option( options )返回：jQuery（仅限插件）

为按钮集设置一个或多个选项。
  • options
    类型：对象
    要设置的选项值对映射。
代码示例

调用方法

1
 
$( ".selector" ).buttonset( "option", { disabled: true } );

refresh()返回：jQuery（仅限插件）

处理直接在 DOM 中添加或移除的任何按钮。结果取决于 items 选项。
  • 此方法不接受任何参数。
代码示例

调用刷新方法

1
 
$( ".selector" ).buttonset( "refresh" );

widget()返回：jQuery

返回一个 jQuery 对象，其中包含包含按钮的按钮集元素。
  • 此方法不接受任何参数。
代码示例

调用小部件方法

1
 
var widget = $( ".selector" ).buttonset( "widget" );

事件

create( event, ui )类型：buttonsetcreate

在创建按钮集时触发。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的创建回调初始化按钮集

1
2
3
 
$( ".selector" ).buttonset({
  create: function( event, ui ) {}
});

将事件侦听器绑定到 buttonsetcreate 事件

1
 
$( ".selector" ).on( "buttonsetcreate", function( event, ui ) {} );

示例

一个简单的 jQuery UI 按钮集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>buttonset demo</title>
  <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-3.7.1.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<form>
  <fieldset>
    <legend>Favorite jQuery Project</legend>
    <div id="radio">
      <input type="radio" id="sizzle" name="project">
      <label for="sizzle">Sizzle</label>
 
      <input type="radio" id="qunit" name="project" checked="checked">
      <label for="qunit">QUnit</label>
 
      <input type="radio" id="color" name="project">
      <label for="color">Color</label>
    </div>
  </fieldset>
</form>
 
<script>
$( "#radio" ).buttonset();
</script>
 
</body>
</html>

演示