image
最近项目需要就想着封装一个简单易用的自定义右键菜单, 原生 JS 编写无需引入任何库, 完美兼容至 IE8; 可根据需要设置多个右键菜单, 每个菜单下也可以进行嵌套.
# 项目仓库
首先要引入样式文件和 JS 文件
- <link rel="stylesheet" href="menu.CSS">
- <script src="menu.js">
- </script>
引入后直接实例化 Menu
el 表示需要使用右键菜单的元素 (JQ 可以传 $('#test')[0]);
menu 数组表示菜单内容, 可以进行嵌套;
name 菜单项名字
callback 选择菜单项后的回调函数
具体可以看下面的 demo
- new Menu({
- el: div1,
- list: [{
- name: '保存',
- callback: function() {
- div1.innerText = '保存';
- }
- },
- {
- name: '刷新',
- callback: function() {
- div1.innerText = '刷新';
- }
- },
- {
- name: '设置',
- menu: [{
- name: '首选项',
- callback: function() {
- div1.innerText = '首选项';
- }
- },
- {
- name: '快捷键',
- callback: function() {
- div1.innerText = '快捷键';
- }
- }
- ]
- }
- ]
- });
来源: http://www.jianshu.com/p/2fcab556bc74