使用菜单组件Menu写一个右键菜单_el-menu加右键点击-优快云博客

本文链接：https://blog.youkuaiyun.com/XHui_Lin/article/details/77318598

本文介绍两种在选项卡上实现右键菜单的方法，通过JavaScript和easyUI组件完成选项卡的关闭操作，包括关闭当前、关闭其他、关闭全部等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

右键菜单：菜单组件Menu

关闭选项卡的右键菜单

第一种：

<div id="mm" class="easyui-menu" style="width:120px;">
    <div id="mm-tabclosrefresh" data-options="name:6">刷新</div>
    <div id="mm-tabclose" data-options="name:1">关闭</div>
    <div id="mm-tabcloseall" data-options="name:2">全部关闭</div>
    <div id="mm-tabcloseother" data-options="name:3">除此之外全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-tabcloseright" data-options="name:4">当前页右侧全部关闭</div>
    <div id="mm-tabcloseleft" data-options="name:5">当前页左侧全部关闭</div>
    </div>

js判断

<script type="text/javascript">
	    //监听右键事件，创建右键菜单、myTab是我的选项卡的ID
             $('#myTab').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 
			);
	      }
	   });
	   
	   //删除Tabs
	     function closeTab(menu, type) {
	        var allTabs = $("#myTab").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 = $("#myTab").tabs("getTabIndex", $("#myTab").tabs("getTab", curTabTitle));
	        switch (type) {
	            case 1:
	                $("#myTab").tabs("close", curTabIndex);
	                return false;
	                break;
	            case 2:
	                for (var i = 0; i < allTabtitle.length; i++) {
	                    $('#myTab').tabs('close', allTabtitle[i]);
	                }
	                break;
	            case 3:
	                for (var i = 0; i < allTabtitle.length; i++) {
	                    if (curTabTitle != allTabtitle[i])
	                        $('#myTab').tabs('close', allTabtitle[i]);
	                }
	                $('#myTab').tabs('select', curTabTitle);
	                break;
	            case 4:
	                for (var i = curTabIndex; i < allTabtitle.length; i++) {
	                    $('#myTab').tabs('close', allTabtitle[i]);
	                }
	                $('#myTab').tabs('select', curTabTitle);
	                break;
	            case 5:
	                for (var i = 0; i < curTabIndex-1; i++) {
	                    $('#myTab').tabs('close', allTabtitle[i]);
	                }
	                $('#myTab').tabs('select', curTabTitle);
	                break;
	            case 6: //刷新
	                var panel = $("#myTab").tabs("getTab", curTabTitle).panel("refresh");
	                break;
	        }
	    } 
    </script>

第二种：

<div id="mm" class="easyui-menu">
	<div id="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div>
	<div id="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div>
	<div id="closeAll" data-options="iconCls:'icon-no'">关闭所有</div>
</div>

js判断

$('#myTab').tabs({
	    onContextMenu: function(e, title, index){
	    	e.preventDefault();
	    //选中标签
	    $('#myTab').tabs('select',index);
	    //显示右键菜单
	    	$('#mm').menu('show', {
	     	left: e.pageX,
	     	top: e.pageY
	    	}) ;
	    }
	});
	//为每个菜单绑定点击事件
	  //关闭选中的标签
	  $("#closeCurrent").click(function(){
		   //获取选中的标签索引
		   var tab = $('#myTab').tabs('getSelected');
		   var index = $('#myTab').tabs('getTabIndex',tab);
		   $("#myTab").tabs("close",index);
	  });
	   //关闭选中标签之外的标签
	   $("#closeOthers").click(function(){
		    //获取所有标签
		    var tabs = $("#myTab").tabs("tabs");
		    var length = tabs.length;
		    //获取选中标签的索引
		    var tab = $('#myTab').tabs('getSelected');
		    var index = $('#myTab').tabs('getTabIndex',tab);
		    //关闭选中标签之前的标签
		    for(var i=0;i<index;i++){
		    	$("#myTab").tabs("close",0);
		    }
		    //关闭选中标签之后的标签
		    for(var i=0;i<length-index-1;i++){
		     	$("#myTab").tabs("close",1);
		    }
	   });
	   //关闭所有标签
	   $("#closeAll").click(function(){
		    var tabs = $("#myTab").tabs("tabs");
		    var length = tabs.length;
		    for(var i=0;i<length;i++){
		     	$("#myTab").tabs("close",0);
		    }
	   });