Skip to content

itorr/iTorr.Menu.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#Menu 右键菜单库

  这是一个 JavaScript 的右键菜单类,通过它我们可以快速实现右键菜单。曾用于 偷揉电台 等项目中,为方便今后使用、抽象成类以开源~

Menu 依托于 iTorr.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 类依托于 iTorr.js 运行,需要绑定菜单时 可通过 $.MenuiTorr.Menu 进行调用。

PS: 为保证代码的适应性,可通过匿名函数限定作用域实现 $ 兼容

~function($){
	$.Menu.reg($('h1'),[ //右键菜单列表
		{
			text:'我是右键菜单第一项', //右键菜单文字内容
			func:function(){ //回调函数
				alert('回调成功');
			}
		}
	]);
}(iTorr);

##实现原理   Menu 通过委托点击事件到 document.body 上实现,判断绑定时会从被点击元素依次向上查找,遇到符合注册时 dom 参数时,即停止查找并显示菜单。因此更内部的元素会优先被查找。

##注册菜单

iTorr.Menu 中,接受 DOM 节点CSS 表达式 两种注册右键菜单方式。

DOM 节点注册法 仅在指引的 DOM 上展示右键菜单;CSS 表达式注册法 会在所有匹配规则的节点上展示右键菜单、无论注册时是否存在。两种方式性能差别不大,请根据具体情况选择适合的注册方式。

两种注册方式均为统一入口 $.Menu.reg

$.Menu.reg(dom,menu,config);

dom HTMLElement/String 为注册的 DOM 节点,或者能匹配到相应 DOM 的 CSS 表达式 menu Array 为菜单列表项 config Object 为注册参数

推荐的注册方式如下:

$.Menu.reg(
	document.body, //注册的 DOM 节点,或者能匹配到相应 DOM 的 CSS 表达式
	[ //菜单列表 数组
		{ //普通的菜单项
			text:'删除', //右键菜单文字内容
			key:'Del', //快捷键提示 (不参与绑定,仅用来提示快捷键)
			func: function(dom){ //绑定回调函数: 参数1->响应回调的 DOM 节点
				dom.del();
			}
		},
		{ //分割线
			type:'hr'
		},
		/*......更多*/
	],
	{//注册参数
		open:function(dom){//菜单被打开时的回调函数: 参数1->响应回调的 DOM 节点
			console.log('菜单开启:',dom)
		},
		close:function(dom){//菜单被关闭时的回调函数: 参数1->响应回调的 DOM 节点
			console.log('菜单关闭:',dom)
		}	
	}
);

但 Menu 是个开放的类库,你可以用各种喜欢的方式使用

$.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);
	}
}]);

##委托形式注册右键菜单   上面展示了很多 DOM 绑定的情况,但为了应多更复杂的任务,更少的耦合以及更优雅的实现,我们可以在 DOM 尚未出现提前通过委托的形式实现右键菜单注册。iTorr.Menu 的委托依靠 CSS 表达式语法,在符合表达式的情况下 即可展示菜单。      委托形式和 DOM 形式在使用上几乎无差别,参数1 替换成 CSS 表达式即可

$.Menu.reg('span',[{
		text:'我是 Span 标签'
}]);

这样在遇到的所有 span 标签上展示右键菜单。

##取消注册   当不需要某个右键菜单时,我们可以取消右键菜单注册    DOM 注册的情况

$.Menu.del($('h1'));

CSS 表达式注册的情况

$.Menu.del('span');

##多级菜单(140517)

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

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

About

iTorr 右键菜单类

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors