jQuery UI 选择菜单类选项(1)

📌 相关文章

📜 jQuery UI 选择菜单类选项(1)

📅 最后修改于: 2023-12-03 14:43:14.279000 🧑 作者: Mango

jQuery UI 选择菜单类选项

简介

jQuery UI是一个用于构建Web应用的JavaScript库，提供了丰富的交互组件和UI效果。其中选择菜单类选项组件可以方便地创建下拉菜单并且支持多级嵌套。

特点

多级嵌套：支持多级父子菜单的嵌套。
自定义样式：可以通过设置CSS样式来自定义菜单的外观。
远程数据源：支持从远程数据源动态加载菜单项。
国际化：支持多种语言的菜单项文本。

安装

直接引用

可以从官网下载jQuery UI并在HTML文件中引用：

<!-- 引用jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引用jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

使用npm

也可以通过npm安装：

npm install jquery-ui

然后在JavaScript文件中使用模块化方式引用：

import 'jquery-ui/themes/base/jquery-ui.css';
import $ from 'jquery';
import 'jquery-ui/ui/widgets/menu';

示例

下面是一个简单的使用menu()方法创建选择菜单的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Menu Demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
  <ul id="menu">
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单3</a></li>
  </ul>
  <script>
    $(function() {
      $("#menu").menu();
    });
  </script>
</body>
</html>

API

方法

`menu()`

将原始的<ul>或<ol>元素转换为选择菜单。

$("#menu").menu();

选项

可通过设置选项来自定义选择菜单的行为和外观。

`disabled`

指定选择菜单是否禁用。

$("#menu").menu({
  disabled: true
});

`icons`

指定每个菜单项的图标。

$("#menu").menu({
  icons: {
    submenu: "ui-icon-triangle-1-e"
  }
});

`position`

指定选择菜单的位置。

$("#menu").menu({
  position: {
    my: "left top",
    at: "right top"
  }
});

`role`

指定选择菜单的ARIA角色。

$("#menu").menu({
  role: "menubar"
});

事件

当选择菜单上的某个菜单项被选中或悬停时，会触发相关的事件。

`select`

当菜单项被选中时触发。

$("#menu").on("select", function(event, ui) {
  console.log("选中的菜单项是：" + ui.item.text());
});

`focus`

当菜单项被悬停时触发。

$("#menu").on("focus", function(event, ui) {
  console.log("悬停的菜单项是：" + ui.item.text());
});

结语

总之，jQuery UI选择菜单类选项是一个非常实用的组件，可以方便地创建下拉菜单。同时，该组件可以通过多种选项和事件来自定义菜单的行为和外观，非常灵活。