jQuery UI Selectmenu 小部件完整参考

简介

jQuery UI Selectmenu 是一个可以替代原生 <select> 元素的小部件，它提供了更高的可自定义性和用户体验。

基本用法

Selectmenu 小部件需要在一个 <select> 元素上调用，它会将原先的 <select> 元素隐藏起来，并创建一个自定义的替代元素。通过使用 jQuery UI CSS 框架，我们可以将 Selectmenu 小部件的主题样式化为与页面风格相符。

<select id="my-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

<script>
  $(function() {
    $("#my-select").selectmenu();
  });
</script>

选项

可以使用一些选项来对 Selectmenu 小部件进行自定义设置。

| 选项 | 类型 | 默认值 | 说明 | | ------------ | ------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | appendTo | String | body | Selectmenu 小部件将附加到的元素选择器 | | disabled | Boolean | false | 是否禁用 Selectmenu 小部件 | | icons | Object | null | 自定义 Selectmenu 小部件中图标的显示 | | position | Object | {} | 可以通过 JSON 对象指定 Selectmenu 小部件的位置 | | width | Number | 0 | Selectmenu 小部件显示的宽度，这是一个数字，表示在默认宽度基础上扩展（如果为 0，则自动将 Selectmenu 宽度设置为最长的选项），设置为 false 将使用原始 select 元素的宽度 | | menuWidth | Number | 0 | 下拉列表的宽度，如果设置为 0，将自适应宽度 | | position | String | "menu" | 可选值："menu"（下拉列表以及触发器元素），"button"（下拉列表是独立的按钮） | | style | String | null | 可以在小部件的样式表中应用自定义 CSS 类，该 CSS 类将向小部件添加样式 | | className | String | null | 向小部件添加自定义 CSS 类 | | aria | Boolean | true | 是否应该使用 ARIA 规则增强无障碍性，开启 ARIA 选择器后，小部件将添加选择器到原始的 select 元素中 | | create | Function | null | 在小部件创建时触发执行的回调函数 | | change | Function | null | 当小部件的值更改时触发执行的回调函数 |

方法

Selectmenu 小部件提供了一些可用的方法，你可以在使用小部件时通过调用这些方法来实现额外的控制和自定义设置。

open

打开下拉列表。

$("#my-select").selectmenu("open");

close

关闭下拉列表。

$("#my-select").selectmenu("close");

disable

禁用小部件。

$("#my-select").selectmenu("disable");

enable

启用小部件。

$("#my-select").selectmenu("enable");

refresh

更新小部件，通常在 DOM 元素有更改时使用。

$("#my-select").selectmenu("refresh");

widget

获取小部件本身的 jQuery 对象。

var selectmenu = $("#my-select").selectmenu("widget");

事件

Selectmenu 小部件提供了一些事件来让用户可以在特定的小部件状态发生变化时执行额外的代码。

selectmenuchange

在小部件的值更改时触发。

$("#my-select").on("selectmenuchange", function(event, ui) {
  console.log("Selected value: " + ui.item.value);
});

selectmenuopen

在小部件的下拉列表打开时触发。

$("#my-select").on("selectmenuopen", function() {
  console.log("Selectmenu is now opened!");
});

selectmenuclose

在小部件的下拉列表关闭时触发。

$("#my-select").on("selectmenuclose", function() {
  console.log("Selectmenu is now closed!");
});

图标

Selectmenu 小部件提供了一些可以定制的图标，你可以使用这些图标来增强小部件的可视化效果。下面是可用的所有图标：

你可以将这些图标应用到 Selectmenu 小部件的选项中：

<select id="my-select">
  <option value="1" data-icon="ui-icon-alert">Option 1</option>
  <option value="2" data-icon="ui-icon-info">Option 2</option>
  <option value="3" data-icon="ui-icon-check">Option 3</option>
  <option value="4">Option 4</option>
</select>

主题

Selectmenu 小部件通常与 JQuery UI 的主题样式一起使用。你可以使用 JQuery UI 的主题框架，或者自定义 CSS 来创建适合你的样式。