当前位置:主页 > JavsScript库 > 菜单 / 导航 >

现代上下文菜单 - modern-context.js
栏目分类:菜单 / 导航   发布日期:2021-09-07   浏览次数:

受Microsoft Fluent Design启发的动态、动画、美观的上下文菜单 JavaScript 库。

如何使用它:

1. 加载上下文菜单的缩小版本。

<script src=”context.min.js”></script>

2. 在包含项目类型、标签和回调的对象数组中定义菜单数据。

const menuItems = [
      {
          type: "item",
          label: "html369",
          callback: () => {
              alert("html369");
          }
      },
      {
          type: "item",
          label: "jQueryScript",
          callback: () => {
              alert("jQueryScript");
          }
      },
      {
          type: "item",
          label: "VueScript",
          callback: () => {
              alert("VueScript");
          }
      },
      {
          type: "separator"
      },
      {
          type: "item",
          label: "ReactScript"
      },
];

3. 初始化库并将上下文菜单附加到您指定的容器。

const context = new Context("#container", menuItem);

4. 在上下文菜单中添加更多项目。

// 带有回调
context.add_item("Google", () => {
  alert("Google")
});
 
// 没有回调
context.add_item("No Callback");
 
// 添加分隔符
context.add_separator();
 
// 添加更多项目
context.add_contents(menuItem2);


5. 手动打开/关闭上下文菜单。

context.open();
context.close();

官方网站:https://github.com/Robot-Inventor/modern-context.js

相关热词: context.js上下文菜单

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库