Menu 右键菜单库

这是一个 JavaScript 的右键菜单类,通过它我们可以快速实现右键菜单。

效果

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

  • 使用下面这一段代码,调用imenu.css,itorr.m.js,itorr.menu.js就行啦。
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="stylesheet" href="imenu.css">

<h1>你好,世界</h1>

<script src="itorr.m.js"></script><!-- iTorr.js 函数库 -->
<script src="itorr.menu.js"></script><!--  Menu 类 -->
<script>
$.Menu.reg($('h1'),[ //右键菜单列表
    {
        text:'我是右键菜单第一项', //右键菜单文字内容
        func:function(){ //回调函数
            alert('回调成功');
        }
    }
]);
</script>

推荐使用方式

$.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:'我还有子菜单~'
        }]
    }]
}])

演示:

请在Chrome,火狐等浏览器测试效果

tool.uixsj.cn/menujs/

或者 二次元弹幕电台 查看效果

tool.uixsj.cn/acg-fm

 

 

下载信息

  • 名称:menu.js
  • 格式:zip
  • 大小:5.9KB

点击下载

发表评论

发表评论

*

没人评论,好尴尬~