JavaScript右键菜单类库下载使用方法

发布于 2018-12-27  54 次阅读


效果


如何快速添加右键菜单到网页中?

首先将 imenu.css,itorr.m.js,itorr.menu.js 导入到你的网页head标签中。
类似于

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="imenu.css">
    <!-- iTorr.js 函数库 -->
    <script src="itorr.m.js"></script>
    <!-- Menu 类 -->
    <script src="itorr.menu.js"></script>
    <script>
    $.Menu.reg($('h1'), [ //右键菜单列表
      {
        text: '我是右键菜单第一项', //右键菜单文字内容
        func: function() { //回调函数
          alert('回调成功');
         }
       }
     ]);
    </script>
    </head>
  <body></body>
</html>

推荐使用

方式一

$.Menu.reg($('h1'),[{
    text:'我是右键菜单第一项', //右键菜单文字内容
    func:function(){ //回调函数
        alert('回调成功');
    }
}],{
    open:function(dom){
        console.log('打开了菜单',dom);
    }
});


方式二

$.Menu.reg($('h1'),{
    menu:[{
        text:'我是右键菜单第一项', //右键菜单文字内容
        func:function(){ //回调函数
            alert('回调成功');
        }
    }],
    open:function(dom){
        console.log('打开了菜单',dom);
    }
});


方式三

$.Menu.reg({
    dom:$('h1'),
    menu:[{
        text:'我是右键菜单第一项', //右键菜单文字内容
        func:function(){ //回调函数
            alert('回调成功');
        }
    }],
    open:function(dom){
        console.log('打开了菜单',dom);
    }
});


或则链式语法

$.Menu.reg($('h1'),[{
    text:'我是大标题'
    //无 func 的情况 点击即消失,没有回调函数~
}]).reg('p',[{ //在所有 p 标签上注册
    text:'我是 P 标签', //右键菜单文字内容
    func:function(dom){ //回调函数
        alert('回调成功',dom);
    }
}]);


添加多级菜单支持,格式如下

$.Menu.reg('span',[{
    text:'我是大标题'
    child:[{
        text:'我是子菜单'
    },{
        text:'我是子菜单2',
        func:function(){
            alert('子菜单回调');
        }
    },{
        text:'我是子菜单3',
        child:[{
        text:'我还有子菜单~'
        }]
    }]
}])


本当の声を響かせてよ