jQuery UI 如何启用菜单

jQuery是一个快速简单的JavaScript库，用于通过HTML创建客户端。它简化了一些JavaScript函数的使用，如DOM操作、遍历、事件处理和AJAX调用。它还具有跨浏览器兼容性。

什么是jQuery UI菜单

jQuery UI菜单是构建在jQuery UI核心上的组件，用于创建下拉菜单和其他导航菜单选项。这些菜单可以通过鼠标指针和键盘点击访问。它还允许开发人员创建菜单并应用自定义样式和主题。这些菜单包括包含菜单和子菜单的分层菜单。

一些jQuey UI菜单的重要特性：

事件和回调函数 : jQuery UI菜单允许开发人员处理用户交互并自定义菜单的行为，它支持广泛的事件和回调函数，如失去焦点、创建、聚焦和选择等。
键盘导航 : 这允许用户通过键盘的箭头键导航菜单，按下Enter/Space可以打开/触发菜单项的操作。同时按下Esc键可以关闭当前菜单/子菜单。

方法1：使用menu()方法

使用jQuery UI菜单小部件的.menu()方法来启用jQuery UI菜单，以及<ul>和<li>项。

步骤

步骤1： 创建一个HTML文件，在<head>标签中引入jQuery和jQuery UI库。然后使用<ul>和<li>创建列表项。

步骤2： 给列表项分配一个id。

步骤3： 现在在<script>标签内，使用menu()方法初始化菜单项。这必须在DOM加载后进行，并在ready()函数内包装初始化代码，以确保在页面加载后运行。

示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery UI Menu</title>
    <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>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <script>
       $(document).ready(function() {$ ("#items").menu();
      });
    </script>

</head>
<body>
    <div style="text-align: center;">
        <h2>Tutorials Point Menu Items</h2>
        <ul id="items">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
      </ul>
    </div>
</body>
</html>

方法2：使用data-widget属性和menu()方法。

另一种可行的技术是在jQuery UI内使用data-widget属性和menu()函数。该属性用于识别HTML元素，并使用该函数进行初始化。

步骤

步骤1： 在HTML文件的<head>部分导入jQuery和jQuery UI库和脚本。

步骤2： 添加<ul>和<li>元素来创建列表项，然后给<ul>标签添加一个唯一的id。

步骤3： 将‘data-widget’属性设置为顶级<ul>标签，并将<ul>元素的值设置为“menu”。

步骤4： 在<script>标签中，选择“data-widget”属性，并使用menu()方法启用UI菜单。

示例

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Menu Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <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>
    <script>
         $(document).ready(function() {$ ("[data-widget='menu']").menu({
        position: { my: "left top", at: "right top" }
      });
        });
    </script>
     <style>
        .ui-menu {
            width: 8em;
        }
    </style>
</head>

<body style="text-align: center;">

    <h2>Tutorials Point Menu Items</h2>
    <ul data-widget="menu">

        <li>Courses</li>
        <li>
            <div>Programming</div>
            <ul>
                <li>
                    <div>Python</div>
                </li>
                <li>
                    <div>Java</div>
                </li>
                <li>
                    <div>Javascript</div>
                </li>
                <li>
                    <div>C++</div>
                </li>
            </ul>
        </li>

        <li>
            <div>Web</div>
            <ul>
                <li>
                    <div>Backend</div>
                    <ul>
                        <li>
                            <div>Node.js</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>Frontend</div>
                </li>
            </ul>
        </li>

        <li>
            <div>Mobile</div>
        </li>
    </ul>

</body>
</html>

方法3：使用 each() 方法

为了增强 jQuery UI 菜单，一种替代技术是利用 each() 函数。这样可以通过遍历各个菜单元素，随后执行 .menu() 操作。

步骤

步骤 1： 在 <head> 标签中引入 jQuery 和 jQuery UI 库。

步骤 2： 为最顶层的 <ul> 标签添加一个唯一的 id 名称。

步骤 3： 使用 each() 方法迭代每个具有 menu 类的元素，然后调用 .menu() 方法。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery UI Menu</title>
    <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>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <script>
       $(document).ready(function() {$ (".menu").each(function() {
              $(this).menu();
          });
      });


  </script>

</head>
<body>
  <div style="text-align: center;">

    <h2>Tutorials Point Menu Items</h2>
    <ul class="menu">
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a>
          <ul>
            <li><a href="#">Submenu Item 1</a></li>
            <li><a href="#">Submenu Item 2</a></li>
            <li><a href="#">Submenu Item 3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu Item 3</a></li>
    </ul>

    <ul class="menu">
        <li><a href="#">Menu Item A</a></li>
        <li><a href="#">Menu Item B</a>
          <ul>
            <li><a href="#">Submenu Item X</a></li>
            <li><a href="#">Submenu Item Y</a></li>
            <li><a href="#">Submenu Item Z</a></li>
          </ul>
        </li>
        <li><a href="#">Menu Item C</a></li>
    </ul>

</div>
</body>
</html>