效果
如何快速添加右键菜单到网页中？
首先将 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:'我还有子菜单~'
}]
}]
}])
Comments | NOTHING