EasyUi右键tab添加菜单

最新推荐文章于 2021-07-29 09:05:59 发布

原创最新推荐文章于 2021-07-29 09:05:59 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

前端设计专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在EasyUI的Tab组件上实现右键菜单功能，包括刷新、关闭当前、关闭其他及关闭所有选项。通过编写JSP与JS代码，使Tab组件具备更多交互功能。

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

在Easyui中给tab添加右键菜单，实现以下功能：

1、首先编写jsp文件

<div id="layout_center_tabs" class="easyui-tabs" data-options="fit:true,border:false" style="overflow: hidden;">
	<div title="首页"></div>
</div>

<div id="layout_center_tabsMenu" style="width: 120px;display:none;">
	<div type="refresh">刷新</div>
	<div class="menu-sep"></div>
	<div type="close">关闭</div>
	<div type="closeOther">关闭其他</div>
	<div type="closeAll">关闭所有</div>
</div>

2、编写js代码

<script type="text/javascript">
$(function(){
	$('#layout_center_tabsMenu').menu({
		onClick : function(item) {
			var curTabTitle = $(this).data('tabTitle');
			var type = $(item.target).attr('type');

			if (type === 'refresh') {
				layout_center_refreshTab(curTabTitle);
				return;
			}

			if (type === 'close') {
				var t = $('#layout_center_tabs').tabs('getTab', curTabTitle);
				if (t.panel('options').closable) {
					$('#layout_center_tabs').tabs('close', curTabTitle);
				}
				return;
			}

			var allTabs = $('#layout_center_tabs').tabs('tabs');
			var closeTabsTitle = [];

			$.each(allTabs, function() {
				var opt = $(this).panel('options');
				if (opt.closable && opt.title != curTabTitle && type === 'closeOther') {
					closeTabsTitle.push(opt.title);
				} else if (opt.closable && type === 'closeAll') {
					closeTabsTitle.push(opt.title);
				}
			});

			for ( var i = 0; i < closeTabsTitle.length; i++) {
				$('#layout_center_tabs').tabs('close', closeTabsTitle[i]);
			}
		}
	});
	
	$('#layout_center_tabs').tabs({
		fit : true,
		border : false,
		onContextMenu : function(e, title) {
			e.preventDefault();
			$('#layout_center_tabsMenu').menu('show', {
				left : e.pageX,
				top : e.pageY
			}).data('tabTitle', title);
		},
		tools : [ {
			iconCls : 'icon-reload',
			handler : function() {
				var href = $('#layout_center_tabs').tabs('getSelected').panel('options').href;
				if (href) {/*说明tab是以href方式引入的目标页面*/
					var index = $('#layout_center_tabs').tabs('getTabIndex', $('#layout_center_tabs').tabs('getSelected'));
					$('#layout_center_tabs').tabs('getTab', index).panel('refresh');
				} 
			}
		}]
	});
});
</script>