jQuery UI |菜单(1) - 芒果文档

📌 相关文章

📜 jQuery UI |菜单(1)

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

jQuery UI | 菜单

jQuery UI是一个众所周知的JavaScript库，可以很容易地创建用户界面组件并与HTML和CSS集成。jQuery UI中的菜单组件可以轻松创建弹出式菜单、选项卡和导航菜单等。

特点

可自定义样式和主题
支持键盘导航和鼠标导航
可以超出选项卡并支持动画效果
支持弹出式菜单
可以很容易地将图标添加到菜单项

安装

下载

可以在jQuery UI的官方网站下载该库然后手动导入您的项目中
使用CDN链接：https://code.jquery.com/ui/1.13.0/jquery-ui.min.js

引入

在您的HTML文件中引入jQuery UI库:

<!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <!-- Your HTML code here -->
</body>
</html>

初始化

$(function() {
  $(element).menu();
});

其中，element是表示您要将菜单附加到的元素的选择器。当触发指定元素时，该菜单将显示为弹出式菜单。

示例

以下是一些示例展示了如何在您的应用程序中使用jQuery UI菜单组件。

选项卡菜单

$(function() {
  $("#menu").menu({
    items: "> :first-child > ul > :first-child",
    position: { my: "left-1 top", at: "right top" }
  });
});

弹出式菜单

$(function() {
  $("element").menu({
    items: "> :first-child > ul > :first-child",
    position: { my: "left top", at: "left bottom" },
    blur: function(event, ui) {
      $(ui.item).children(".ui-menu").hide();
    }
  });
});

导航菜单

$(function() {
  $("#menu")
    .menu()
    .find("a")
      .addClass("ui-button ui-widget ui-corner-all")
      .on("click", function() {
        window.location.href = $(this).attr("href");
      });
});

注意事项

如需使用菜单右键单击事件必须阻止浏览器的默认行为
使用菜单时，应为列表（
选项卡中的过长菜单可使用滚动条部分隐藏或动态计算位置

右键菜单块

$(function() {
  $("element").menu({
    })
    .on("contextmenu", function(event) {
      event.preventDefault();
      $("element").menu("show", {
        position: { my: "left top", at: "left bottom" },
        using: function(position, feedback) {
          $(this).css(position).removeClass("ui-hidden-accessible");
          feedback.target.css("position", "fixed");
        }
      });
    });
});

参考文献

官方文档