`
kanpiaoxue
  • 浏览: 1777492 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

为EasyUI 的Tab 标签添加右键菜单

 
阅读更多
 <div id="mm" class="easyui-menu" style="width:150px;">
         <div id="mm-tabclose" name="1">关闭标签页</div>
        <div id="mm-tabcloseall" name="2">关闭全部标签页</div>
        <div id="mm-tabcloseother" name="3">关闭其它标签页</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright" name="4">关闭右侧标签页</div>
        <div id="mm-tabcloseleft" name="5">关闭左侧标签页</div>
    </div>

 

	// 监听右键事件,创建右键菜单
		$('#tt').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 obj = $('#tt');
	;
	var allTabs = obj.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');

//	console.log('curTabTitle:' + curTabTitle)

	var curTabIndex = obj.tabs('getTabIndex', obj.tabs('getTab', curTabTitle));
	/**
	 * <pre>
	 * 	    1:关闭标签页
	 * 	    2:关闭全部标签页
	 * 	    3:关闭其它标签页
	 * 	    4:关闭右侧标签页
	 * 	    5:关闭左侧标签页
	 * </pre>
	 */
	switch (type) {
	case '1':
		obj.tabs('close', curTabTitle);
		break;
	case '2':
		for (var i = 0, j = allTabtitle.length; i < j; i++) {
			obj.tabs('close', allTabtitle[i]);
		}
		break;
	case '3':
		for (var i = 0, j = allTabtitle.length; i < j; i++) {
			if (curTabTitle != allTabtitle[i]) {
				obj.tabs('close', allTabtitle[i]);
			}
		}
		obj.tabs('select', curTabTitle);
		break;
	case '4':
		for (var i = curTabIndex + 1 ,j = allTabtitle.length; i<j; i++) {
			obj.tabs('close', allTabtitle[i]);
		}
		obj.tabs('select', curTabTitle);
		break;
	case '5':
		for (var i = 0; i < curTabIndex; i++) {
			obj.tabs('close', allTabtitle[i]);
		}
		obj.tabs('select', curTabTitle);
		break;
	}

}

 

分享到:
评论

相关推荐

    Easyui添加Tab右键菜单

    默认情况下,EasyUI的Tab组件并不支持右键菜单,但通过自定义JavaScript代码,我们可以为每个Tab添加这样的功能。 在"demo.html"中,你会看到HTML结构是如何设置的。通常,一个Tab面板由`&lt;div&gt;`元素包裹,使用`...

    为EasyUI的Tab标签添加右键菜单的方法

    在本文中,我们将深入探讨如何为EasyUI的Tab标签添加右键菜单,这是一个对于提升用户体验非常实用的功能。EasyUI是一个基于jQuery的UI框架,它提供了一系列组件来帮助开发者快速构建美观的Web应用。在之前的实现中,...

    EasyUI tabs添加右键关闭菜单

    在本主题“EasyUI tabs 添加右键关闭菜单”中,我们将探讨如何为 EasyUI 的 tabs 组件添加自定义的右键菜单,实现点击右键时出现一个包含“关闭当前标签页”选项的菜单。 首先,我们需要了解 EasyUI 的 tabs 组件的...

    为jQuery-easyui的tab组件添加右键菜单功能的简单实例

    在本文中,我们将探讨如何为jQuery-easyui的tab组件添加右键菜单功能。这个功能在许多Web应用程序中非常有用,允许用户通过右键点击选项卡来执行特定操作,如关闭当前选项卡、关闭所有选项卡等。我们将分为以下几个...

    easyui tabs 右键关闭

    最后,标签中的 "easyui tab menu 右键 关闭" 概括了这个话题的关键点:使用 EasyUI 的选项卡组件,结合右键菜单功能,实现用户可以右键点击选项卡关闭的功能。 总结一下,要实现“easyui tabs 右键关闭”,你需要...

    jQuery EasyUI实现右键菜单变灰不可用效果

    在本文中,我们将探讨如何使用jQuery EasyUI库来实现右键菜单中的特定选项变灰不可用的效果。jQuery EasyUI是一个基于jQuery的UI框架,它提供了一系列的组件,如表格、表单、窗口、菜单等,使得开发者能够快速构建富...

    jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    根据给定的文件内容,以下是关于jQuery EasyUI右键菜单中关闭标签/选项卡的实例的知识点: 1. jQuery EasyUI是一个基于jQuery的前端框架,用于创建Web界面,它包括界面组件如数据网格、选项卡、对话框等。EasyUI的...

    jQuery EasyUI右键菜单实现关闭标签/选项卡

    本文讲解了如何使用jQuery EasyUI框架实现右键菜单来关闭标签页(选项卡)。jQuery EasyUI是一个基于jQuery的前端UI框架,它提供了一系列可轻松使用的界面组件,例如选项卡、数据网格等,能够帮助开发者快速构建交互...

    easyui-tabbar右击弹出菜单

    要添加右键菜单,我们需要对TabPanel的每个标签页进行操作。在JavaScript中,我们可以利用jQuery的选择器找到每个标签页,并为其绑定右键点击事件。在事件处理函数中,我们将创建一个上下文菜单(即右键菜单),并...

    jQuery EasyUI 1.3 API 中文教程

    带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 - DataGridFooter Row 树形数据表格 - TreeGrid 数据表格显示页脚 - TreeGrid 带分页的树形...

    JqueryEasyU页面布局。左边导航,上面tabs.都已经集成好了。

    Tab页支持多种操作,比如右键菜单提供关闭、关闭其他、关闭左边所有、关闭右边所有的功能。这些功能可以通过监听`contextmenu`(右键点击)事件,结合`easyui-tabs`的API实现,例如`tabs('close', tabPanelId)`用于...

    JEECG UI标签库帮助文档v3.3

    - **prohibit**: 常用浏览器操作JS函数,如禁用右键菜单、禁用回退、禁用F5等。 - **designer**: 在线流程设计器函数库。 - **tools**: 包含artDialog4.1.6弹出窗及常用CURD操作函数。 #### Datagrid(数据表) *...

    MVC+EasyUI+三层新闻网站建立 主页布局的方法(五)

    在Visual Studio中,可以通过右键项目 -&gt; 添加 -&gt; 新建项 -&gt; MVC控制器来创建一个新的控制器。 接下来,我们要创建`Index`视图。视图是MVC模式中的V(View),负责显示由控制器传递的数据。在`Home`控制器下创建一...

    KindEditor 编辑器 v3.5.1 修改版

    具体来说,修改为在输入时自动添加两个全角空格。这样的修改更符合中文的输入习惯。在很多中文输入场景中,通常需要在输入英文单词或者缩写之后,输入两个全角空格来分隔,使得文本的可读性更高。 接下来,我们来看...

Global site tag (gtag.js) - Google Analytics