jQuery UI 选择菜单

jQuery UI 是一个基于 jQuery 的用户界面和交互库，选择菜单是其中一个常用的组件之一。选择菜单可以帮助我们轻松地创建一个包含多个选项的下拉菜单。下面是关于 jQuery UI 选择菜单的介绍。

安装

想要使用 jQuery UI 选择菜单，我们需要先引入 jQuery 和 jQuery UI 的库文件，这可以通过以下方式进行。

<!-- 引入 jQuery 和 jQuery UI 的库文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

<!-- 引入 jQuery UI 的 CSS 样式文件 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">

基本用法

下面展示了使用 HTML 和 jQuery UI 选择菜单创建一个基本的下拉菜单的代码。

<!-- 创建一个下拉菜单 -->
<label for="select-menu">Select a value:</label>
<select name="select-menu" id="select-menu">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
</select>

// 初始化选择菜单
$(function() {
  $("#select-menu").selectmenu();
});

在上面的代码中，我们先创建了一个包含三个选项的下拉菜单。然后，我们使用 selectmenu() 函数将其转换为 jQuery UI 选择菜单。

自定义样式

你可以通过自定义样式来让你的选择菜单更好看。例如，可以为选项添加图标，添加搜索框等。

<!-- 创建一个搜索框式的下拉菜单 -->
<label for="search-menu">Search and select a value:</label>
<select name="search-menu" id="search-menu">
  <option value="">Select one...</option>
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
</select>

// 初始化选择菜单
$(function() {
  $("#search-menu").selectmenu({
    icons: { button: "ui-icon ui-icon-triangle-1-s" }, // 添加图标
    showSearch: true, // 显示搜索框
    search: function(event, ui) { // 注册搜索回调函数
      var value = $('#search-menu').val();
      if (!value) return;
      if (!ui.item) return;
      if (ui.item.value !== value) return;
      $('#search-menu').val('');
      alert("Selected value: " + ui.item.value);
    }
  });
});

在上面的代码中，我们添加了 UI 图标和搜索框，并注册了一个搜索回调函数。当用户选择一个选项时，将会输出所选值。

API 参考

• selectmenu(): 将一个下拉列表转换为 jQuery UI 选择菜单。
• selectmenu("destroy"): 将一个选择菜单恢复为下拉列表。
• selectmenu("open"): 打开选择菜单。
• selectmenu("close"): 关闭选择菜单。
• selectmenu("disable"): 禁用选择菜单。
• selectmenu("enable"): 启用选择菜单。
• selectmenu("option", optionName, [value]): 获取或设置选择菜单的选项。
• selectmenu("widget"): 获取选择菜单的 widget。

结语

以上就是关于 jQuery UI 选择菜单的介绍，希望对你有所帮助。如果你想了解更多关于 jQuery UI 的内容，可以去其官网查看相关文档：https://jqueryui.com/ 。