步骤一:
在页面里加入html片段
<div id="mainTab" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">
tab3
</div>
</div>
<div id="tab_menu" class="easyui-menu" style="width:150px;">
<div id="tab_menu-tabclose">关闭</div>
<div id="tab_menu-tabcloseall">关闭全部</div>
<div id="tab_menu-tabcloseother">关闭其他</div>
<div class="menu-sep"></div>
<div id="tab_menu-tabcloseright">关闭右侧标签</div>
<div id="tab_menu-tabcloseleft">关闭左侧标签</div>
</div>
步骤二:编写js片段
/**
* 绑定tab右键菜单事件
*/
function bindTabMenuEvent() {
//关闭当前
$('#tab_menu-tabclose').click(function() {
var currtab_title = $('#tab_menu').data("currtab");
if ($(this).next().is('.tabs-close')) {
$('#mainTab').tabs('close', currtab_title);
}
});
//全部关闭
$('#tab_menu-tabcloseall').click(function() {
$('.tabs-inner span').each(function(i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
$('#mainTab').tabs('close', t);
}
});
});
//关闭除当前之外的TAB
$('#tab_menu-tabcloseother').click(function() {
var currtab_title = $('#tab_menu').data("currtab");
$('.tabs-inner span').each(function(i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
if (t != currtab_title)
$('#mainTab').tabs('close', t);
}
});
});
//关闭当前右侧的TAB
$('#tab_menu-tabcloseright').click(function() {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
alert('已经是最后一个了');
return false;
}
nextall.each(function(i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#mainTab').tabs('close', t);
}
});
return false;
});
//关闭当前左侧的TAB
$('#tab_menu-tabcloseleft').click(function() {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == 1) {
$.messager.alert('已经是第一个了');
return false;
}
prevall.each(function(i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#mainTab').tabs('close', t);
}
});
return false;
});
}
最后在需要的地方直接调用以上方法即可!
分享到:
相关推荐
在本主题“EasyUI tabs 添加右键关闭菜单”中,我们将探讨如何为 EasyUI 的 tabs 组件添加自定义的右键菜单,实现点击右键时出现一个包含“关闭当前标签页”选项的菜单。 首先,我们需要了解 EasyUI 的 tabs 组件的...
非常好看的易用的easyui tabs 右键插件,自己两行代码就搞定
在本示例中,我们将关注如何在EasyUI的Tab组件上添加右键菜单,实现包括刷新、关闭、全部关闭、关闭左侧和关闭右侧等操作。 首先,我们需要理解EasyUI的Tab组件。Tab组件是EasyUI中的一个核心组件,用于展示多个...
在本主题中,我们将聚焦于“easyui tabs 右键关闭”这一功能,即如何在 EasyUI 的选项卡上实现类似浏览器的右键菜单,允许用户通过右键点击关闭当前选项卡。 首先,我们需要创建一个基本的 EasyUI 选项卡结构。这...
在本文中,我们将探讨如何使用jQuery EasyUI库来实现右键菜单中的特定选项变灰不可用的效果。jQuery EasyUI是一个基于jQuery的UI框架,它提供了一系列的组件,如表格、表单、窗口、菜单等,使得开发者能够快速构建富...
本文讲解了如何使用jQuery EasyUI框架实现右键菜单来关闭标签页(选项卡)。jQuery EasyUI是一个基于jQuery的前端UI框架,它提供了一系列可轻松使用的界面组件,例如选项卡、数据网格等,能够帮助开发者快速构建交互...
根据给定的文件内容,以下是关于jQuery EasyUI右键菜单中关闭标签/选项卡的实例的知识点: 1. jQuery EasyUI是一个基于jQuery的前端框架,用于创建Web界面,它包括界面组件如数据网格、选项卡、对话框等。EasyUI的...
这些`<div>`元素代表了右键菜单中的各个选项,如“关闭”、“全部关闭”等。`class="easyui-menu"`确保它们被jQuery-easyui识别为菜单项。 接下来,我们需要编写JavaScript代码来处理用户的交互。这包括监听双击...
在本文中,我们将深入探讨如何为EasyUI的Tab标签添加右键菜单,这是一个对于提升用户体验非常实用的功能。EasyUI是一个基于jQuery的UI框架,它提供了一系列组件来帮助开发者快速构建美观的Web应用。在之前的实现中,...
本文将详细探讨如何利用EasyUI的TabPanel(tabs)组件实现一个功能丰富的右键菜单,包括关闭当前、关闭其他、关闭左侧和关闭右侧的选项。 首先,让我们了解EasyUI的TabPanel组件。TabPanel是EasyUI中的一个核心组件...
5、修复当tabs使用iframe时,右键菜单刷新报错问题。 6、增加combotree对简单数据格式和类标准数据格式的加载,具体参考jquery.easyui.tree.extend.js文件开头说明。 7、修复datagrid.onConfirmEdit事件默认实现bug...
在本实例中,我们关注的是如何实现一个右键菜单,尤其是用于关闭标签页(选项卡)的功能。 首先,`noContextMenu.js` 文件的主要目的是屏蔽页面上的默认右键菜单。通过使用 `$(document).bind("contextmenu", ...
Tab页支持多种操作,比如右键菜单提供关闭、关闭其他、关闭左边所有、关闭右边所有的功能。这些功能可以通过监听`contextmenu`(右键点击)事件,结合`easyui-tabs`的API实现,例如`tabs('close', tabPanelId)`用于...
2. **组件介绍**:手册详细介绍了每个组件的用法,如`datagrid`(数据网格)用于展示和操作表格数据,`dialog`(对话框)用于弹出窗口,`menu`(菜单)用于创建下拉或右键菜单,`tabs`(选项卡)用于管理多个视图,`...
5. **Menu**:菜单组件提供了丰富的菜单和子菜单功能,适用于构建导航栏或右键菜单。通过demo,你可以了解菜单的动态加载、展开/折叠、事件监听等特性。 6. **其他组件**:除以上组件外,EasyUI还包括了诸如...
带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 - DataGridFooter Row 树形数据表格 - TreeGrid 数据表格显示页脚 - TreeGrid 带分页的树形...
datagrid冻结列讲解,datagrid右键菜单讲解,forzenColumns与fitColumns的应用) 第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,内容居右等应用)(formatter的提示功能,由于录制问题...