easyui为tabs添加右键菜单

最新推荐文章于 2024-04-29 09:15:46 发布

lvmenglong888

最新推荐文章于 2024-04-29 09:15:46 发布

阅读量1.8k

点赞数 1

在使用easyui-tabs时，当我们打开许多个tab后，我们希望也能像浏览器窗口一样有一个右键菜单，包含关闭全部、关闭当前、关闭右侧等操作，该文就讲述如何实现此功能。

挂上一图，看看效果，菜单就是easyui的menu组件，使用者可以为菜单选项添加图标，定义样式，甚至可以设置多级结构的菜单。

 
         <div 
         id="rcmenu" 
         class="easyui-menu" 
         style=""> 
        
             <div 
         data-options="iconCls:'icon-cancel'" 
         id="closecur"> 
        
                 关闭 
        
             </div> 
        
             <div 
         id="closeall"> 
        
                 关闭全部 
        
             </div> 
        
             <div 
         id="closeother"> 
        
                 关闭其他 
        
             </div> 
        
             <div 
         class="menu-sep"></div> 
        
             <div 
         id="closeright"> 
        
                 关闭右侧标签页 
        
             </div> 
        
             <div 
         id="closeleft"> 
        
                 关闭左侧标签页 
        
             </div> 
        
         </div>

easyui-menu的使用请参考官方文档：http://www.jeasyui.com/documentation/menu.php

 
         $(function(){ 
        
             $(".tabs-header").bind('contextmenu',function(e){ 
        
                 e.preventDefault(); 
        
                 $('#rcmenu').menu('show', { 
        
                     left: e.pageX, 
        
                     top: e.pageY 
        
                 }); 
        
             }); 
        
             //关闭当前标签页 
        
             $("#closecur").bind("click",function(){ 
        
                 var 
         tab = $('#tab').tabs('getSelected'); 
        
                 var 
         index = $('#tab').tabs('getTabIndex',tab); 
        
                 $('#tab').tabs('close',index); 
        
             }); 
        
             //关闭所有标签页 
        
             $("#closeall").bind("click",function(){ 
        
                 var 
         tablist = $('#tab').tabs('tabs'); 
        
                 for(var 
         i=tablist.length-1;i>=0;i--){ 
        
                     $('#tab').tabs('close',i); 
        
                 } 
        
             }); 
        
             //关闭非当前标签页（先关闭右侧，再关闭左侧） 
        
             $("#closeother").bind("click",function(){ 
        
                 var 
         tablist = $('#tab').tabs('tabs'); 
        
                 var 
         tab = $('#tab').tabs('getSelected'); 
        
                 var 
         index = $('#tab').tabs('getTabIndex',tab); 
        
                 for(var 
         i=tablist.length-1;i>index;i--){ 
        
                     $('#tab').tabs('close',i); 
        
                 } 
        
                 var 
         num = index-1; 
        
                 for(var 
         i=num;i>=0;i--){ 
        
                     $('#tab').tabs('close',0); 
        
                 } 
        
             }); 
        
             //关闭当前标签页右侧标签页 
        
             $("#closeright").bind("click",function(){ 
        
                 var 
         tablist = $('#tab').tabs('tabs'); 
        
                 var 
         tab = $('#tab').tabs('getSelected'); 
        
                 var 
         index = $('#tab').tabs('getTabIndex',tab); 
        
                 for(var 
         i=tablist.length-1;i>index;i--){ 
        
                     $('#tab').tabs('close',i); 
        
                 } 
        
             }); 
        
             //关闭当前标签页左侧标签页 
        
             $("#closeleft").bind("click",function(){ 
        
                 var 
         tab = $('#tab').tabs('getSelected'); 
        
                 var 
         index = $('#tab').tabs('getTabIndex',tab); 
        
                 var 
         num = index-1; 
        
                 for(var 
         i=0;i<=num;i++){ 
        
                     $('#tab').tabs('close',0); 
        
                 } 
        
             }); 
        
         });