为jQuery-easyui的tab组件添加右键菜单功能

jQuery中的easyui插件包的tab标签组件，挺不错的，下面介绍如何为tab标签组件添加右键功能，效果图如下：

加入了右击TAB选项卡时显示关闭的上下文菜单

具体实现代码：

右键菜单 HTML:

 Code  [http://www.xueit.com]

< div id ="mm" class ="easyui-menu" style ="width:150px;" > < div id ="mm-tabclose" > 关闭 </ div > < div id ="mm-tabcloseall" > 全部关闭 </ div > < div id ="mm-tabcloseother" > 除此之外全部关闭 </ div > < div class ="menu-sep" ></ div > < div id ="mm-tabcloseright" > 当前页右侧全部关闭 </ div > < div id ="mm-tabcloseleft" > 当前页左侧全部关闭 </ div > </ div >

下面是js代码：

 Code  [http://www.xueit.com]

$( function (){ tabClose(); tabCloseEven(); }) function tabClose() { /* 双击关闭TAB选项卡 */ $( " .tabs-inner " ).dblclick( function (){ var subtitle = $( this ).children( " span " ).text(); $( ' #tabs ' ).tabs( ' close ' ,subtitle); }) $( " .tabs-inner " ).bind( ' contextmenu ' , function (e){ $( ' #mm ' ).menu( ' show ' , { left: e.pageX, top: e.pageY, }); var subtitle = $( this ).children( " span " ).text(); $( ' #mm ' ).data( " currtab " ,subtitle); return false ; }); } // 绑定右键菜单事件 function tabCloseEven() { // 关闭当前 $( ' #mm-tabclose ' ).click( function (){ var currtab_title = $( ' #mm ' ).data( " currtab " ); $( ' #tabs ' ).tabs( ' close ' ,currtab_title); }) // 全部关闭 $( ' #mm-tabcloseall ' ).click( function (){ $( ' .tabs-inner span ' ).each( function (i,n){ var t = $(n).text(); $( ' #tabs ' ).tabs( ' close ' ,t); }); }); // 关闭除当前之外的TAB $( ' #mm-tabcloseother ' ).click( function (){ var currtab_title = $( ' #mm ' ).data( " currtab " ); $( ' .tabs-inner span ' ).each( function (i,n){ var t = $(n).text(); if (t != currtab_title) $( ' #tabs ' ).tabs( ' close ' ,t); }); }); // 关闭当前右侧的TAB $( ' #mm-tabcloseright ' ).click( function (){ var nextall = $( ' .tabs-selected ' ).nextAll(); if (nextall.length == 0 ){ // msgShow('系统提示','后边没有啦~~','error'); alert( ' 后边没有啦~~ ' ); return false ; } nextall.each( function (i,n){ var t = $( ' a:eq(0) span ' ,$(n)).text(); $( ' #tabs ' ).tabs( ' close ' ,t); }); return false ; }); // 关闭当前左侧的TAB $( ' #mm-tabcloseleft ' ).click( function (){ var prevall = $( ' .tabs-selected ' ).prevAll(); if (prevall.length == 0 ){ alert( ' 到头了，前边没有啦~~ ' ); return false ; } prevall.each( function (i,n){ var t = $( ' a:eq(0) span ' ,$(n)).text(); $( ' #tabs ' ).tabs( ' close ' ,t); }); return false ; }); }