效果
如何快速添加右键菜单到网页中?
首先将 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