首页 > 代码库 > EasyUI 的Tab 标签添加右键菜单

EasyUI 的Tab 标签添加右键菜单

2024-08-29 18:56:22   220人阅读

样式： 

　　技术分享

   主要提供右键功能代码。

   (只需要提供你需要的js和css就行了)

<!doctype html>
<html>
<head> 
  <base href="/smile/" /> 
  <title>标签右键菜单</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
  <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
  <meta HTTP-EQUIV="Expires" CONTENT="0"> 
  <link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/icon.css?ver=1.0031" /> 
  <link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/gray/easyui.css?ver=1.0031" />  
  <script type="text/javascript" src="/smile/js/jquery.min.js?ver=1.0031"></script> 
  <script type="text/javascript" src="/smile/js/easyui/jquery.easyui.min.js?ver=1.0031"></script> 
 
</head>
<body class="easyui-layout"> 
  <div data-options="region:‘west‘,title:‘功能导航菜单‘,collapsible:false,iconCls:‘fa fa-leaf‘" style="width: 200px;"> 
   <div id="aa" class="easyui-accordion" data-options="fit:true">
    <div title="菜单一" style="overflow: auto; padding: 5px;" iconCls="fa fa-building"> 
         <ul class="easyui-tree" data-options="onClick:clickTree"> 
         <li data-options="attributes:{‘url‘:‘/smile/html/menu1.html‘}"><span>菜单一</span></li> 
         </ul> 
    </div> 
   <div title="菜单二" style="overflow: auto; padding: 5px;" iconCls="fa fa-building"> 
         <ul class="easyui-tree" data-options="onClick:clickTree"> 
             <li data-options="attributes:{‘url‘:‘/smile/html/menu2.html‘}"><span>菜单二</span></li>  
         </ul> 
    </div>
   </div> 
  </div>
  <!--首页  --> 
  <div data-options="region:‘center‘,collapsible:false">
  <div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true">
       <div title="首页" style="overflow:hidden;" data-options="iconCls:‘fa fa-home‘">
        <div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div> 
       </div>
  </div> 
 </div>
  <!--右键菜单栏  -->
   <div id="mm" class="easyui-menu" style="width: 120px;">      
         <div id="mm-tabclosecurrent" name="1"> 关闭当前页</div>
         <div id="mm-tabcloseall" name="2">   全部关闭</div>
         <div id="mm-tabcloseother" name="3">  其他全部关闭</div>
    </div>   
    <script type="text/javascript">
    $(function(){
           //监听右键事件，创建右键菜单
           $(‘#mainTabs‘).tabs({
               onContextMenu:function(e, title,index){
                   e.preventDefault();
                   if(index>0){
                       $(‘#mm‘).menu(‘show‘, {
                           left: e.pageX,
                           top: e.pageY
                       }).data("tabTitle", title);
                   }
               }
           });
           //右键菜单click
           $("#mm").menu({
               onClick : function (item) {
                   closeTab(this, item.name);
               }
           });

   });
    

       function addTab(title, url) {
       if ($(‘#mainTabs‘).tabs(‘exists‘, title)) {
         $(‘#mainTabs‘).tabs(‘select‘, title);
       } else {
        var  content = ‘<iframe  scrolling="auto" frameborder="0"  src="http://www.mamicode.com/‘+ url+‘" style="width:100%;height:99%;"></iframe>‘;
         $(‘#mainTabs‘).tabs(‘add‘, {
             title: title,          
            content: content,     
            closable: true ,
            cache:true,   
         }); 
       }
      
     }
       

       //  //删除Tabs
      function closeTab(menu, type) {
           var allTabs = $("#mainTabs").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");
           var curTabIndex = $("#mainTabs").tabs("getTabIndex", $("#mainTabs").tabs("getTab", curTabTitle));
           switch (type) {
               case "1"://关闭当前
                   $("#mainTabs").tabs("close", curTabTitle);
                   return false;
                   break;
               case "2"://全部关闭
                   for (var i = 0; i < allTabtitle.length; i++) {
                       $(‘#mainTabs‘).tabs(‘close‘, allTabtitle[i]);
                   }
                   break;
               case "3"://关闭其他全部
                   for (var i = 0; i < allTabtitle.length; i++) {
                       if (curTabTitle != allTabtitle[i])
                           $(‘#mainTabs‘).tabs(‘close‘, allTabtitle[i]);
                   }
                   $(‘#mainTabs‘).tabs(‘select‘, curTabTitle);
                   break;
           }

       }   
    
     function clickTree(node) {
       if ($(this).tree(‘isLeaf‘, node.target)) {
       addTab(node.text, node.attributes.url); 
       } else {
        $(this).tree(‘toggle‘, node.target);
       
       }
     } 
     
    </script>
</body>
</html>

 

EasyUI 的Tab 标签添加右键菜单


联系
我们