使用菜单组件Menu写一个右键菜单

本文介绍两种在选项卡上实现右键菜单的方法,通过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);
		    }
	   }); 



当然,我可以帮你一个用Vue 3编的自定义右键菜单组件。以下是一个简单的示例: 1. 首先,创建一个名为`ContextMenu.vue`的组件文件。 ```vue <template> <div class="context-menu" :style="{ top: `${top}px`, left: `${left}px` }"> <ul> <li v-for="(item, index) in items" :key="index" @click="handleItemClick(item.action)"> {{ item.label }} </li> </ul> </div> </template> <script> export default { props: { items: { type: Array, required: true }, top: { type: Number, required: true }, left: { type: Number, required: true } }, methods: { handleItemClick(action) { // 执行相应的操作 if (action) { this[action](); } }, // 示例操作函数 exampleAction() { console.log("执行了示例操作"); } } }; </script> <style scoped> .context-menu { position: fixed; background-color: #fff; border: 1px solid #ccc; padding: 8px; } </style> ``` 2. 在需要使用右键菜单的地方,引入并使用`ContextMenu`组件。 ```vue <template> <div class="container" @contextmenu.prevent="showContextMenu($event)"> 右键点击此处显示菜单 <ContextMenu v-if="showMenu" :items="menuItems" :top="menuTop" :left="menuLeft" /> </div> </template> <script> import ContextMenu from "@/components/ContextMenu.vue"; export default { components: { ContextMenu }, data() { return { showMenu: false, menuItems: [ { label: "菜单项1", action: "exampleAction" }, { label: "菜单项2", action: "exampleAction" }, { label: "菜单项3", action: "exampleAction" } ], menuTop: 0, menuLeft: 0 }; }, methods: { showContextMenu(event) { event.preventDefault(); this.showMenu = true; this.menuTop = event.clientY; this.menuLeft = event.clientX; }, exampleAction() { console.log("执行了示例操作"); } } }; </script> <style scoped> .container { width: 200px; height: 200px; background-color: lightgray; } </style> ``` 这个示例中,我们创建一个`ContextMenu`组件,它接收一个菜单项数组和菜单显示的位置作为props。当右键点击触发`@contextmenu.prevent`事件时,显示右键菜单,并根据鼠标位置设置菜单的top和left样式。 请注意,这只是一个简单的示例,你可以根据自己的需求对菜单样式和行为进行进一步的定制。希望对你有所帮助!如果你还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值