📌  相关文章
📜  如何启用 jQuery UI 菜单？(1)

📅  最后修改于: 2023-12-03 15:08:32.511000             🧑  作者: Mango

如何启用 jQuery UI 菜单？

jQuery UI 是一个基于 jQuery 的用户界面库，其中包含了很多方便实用的组件和插件，包括菜单组件。本文将介绍如何启用 jQuery UI 菜单。

步骤1：引入必要的文件

首先，需要引入 jQuery 及 jQuery UI 的相关文件，可以通过以下方式引入：

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/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.12.1/jquery-ui.min.js"></script>
</head>
步骤2：编写 HTML 结构

接下来，需要编写 HTML 结构，用于容纳菜单项，如下所示：

<div id="menu">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>
步骤3：初始化菜单

最后，我们需要在 JavaScript 文件中初始化菜单，如下所示：

$(function() {
  $("#menu").menu();
});

现在，我们就成功启用了 jQuery UI 菜单。

总结

本文简要介绍了如何启用 jQuery UI 菜单，需要注意的是，除了在 HTML 文件中引入必要的文件之外，还需要在 JavaScript 文件中进行初始化。如果您对 jQuery 及 jQuery UI 不熟悉，建议去官网查阅相关文档。

参考链接：jQuery UI Menus