使用easyui为tab页增加右键菜单
在使用easyui进行上左右布局一文中，我们已经使用easyui搭建起了一个简单的上左右布局。在使用的过程中，我们经常会遇到tab页打开的太多，但只能一个一个的关闭的烦恼，这个时候有没有想到eclipse中tab右键菜单的关闭其他和关闭所有选项呢？
下面我们就来使用easyui来实现tab页的关闭其他和关闭所有的功能。
1.在上一篇文章的html结构中添加入menu的结构
<body> <div id="home-layout"> <!-- 以前的code --> </div> <!-- tab页的右键菜单 --> <div id="home-tabs-menu" class="easyui-menu"> <div data-options="name:1">关闭</div> <div data-options="name:2">关闭其他</div> <div data-options="name:3">关闭所有</div> </div> </body>
2.为tab组件添加鼠标右键事件
<script> /* * 初始化内容区的tabs */ $("#home-tabs").tabs({ fit : true, border : false, //为其附加鼠标右键事件 onContextMenu: function(e, title, index){
//该方法通知浏览器不要执行与此事件关联的默认动作
//即屏蔽了浏览器在tab页上的鼠标右键事件 e.preventDefault(); var mm = $("#home-tabs-menu"); //显示右键菜单 mm.menu("show",{ top: e.pageY, left: e.pageX }).data("tabTitle",title); //为右键菜单选项绑定事件 mm.menu({ onClick: function(item){ closeTab(this, item.name); } }); } }); </script>
3.closeTab方法
<script> /* * 关闭tab */ function closeTab(menu, type){ var allTabs = $("#home-tabs").tabs("tabs"); var allTabTitle = []; $.each(allTabs, function(i, n){ var opt = $(n).panel("options"); if(opt.closable){ allTabTitle.push(opt.title); } }); var curTabTitle = $(menu).data("tabTitle"); switch(type){ case 1: //关闭当前 $("#home-tabs").tabs("close", curTabTitle); return false; break; case 2: //关闭其他 for(var i = 0; i < allTabTitle.length; i++){ if(curTabTitle != allTabTitle[i]){ $("#home-tabs").tabs("close",allTabTitle[i]); } } $("#home-tabs").tabs("select",curTabTitle); break; case 3: //关闭所有 for(var i = 0; i < allTabTitle.length; i++){ $("#home-tabs").tabs("close",allTabTitle[i]); } break; } } </script>
这样就完成了tab页的右键菜单了，是不是使用起来很方便呢？当然，我们还可以继续在此基础上为它添加更多的功能！
