加入了右击TAB选项卡时显示关闭的上下文菜单
具体实现代码:
右键菜单 HTML:
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">全部关闭</div>
<div id="mm-tabcloseother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">当前页右侧全部关闭</div>
<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
</div>
下面是js代码:
$(function(){
tabClose();
tabCloseEven();
})
function tabClose()
{
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function(){
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close',subtitle);
})
$(".tabs-inner").bind('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
var subtitle =$(this).children("span").text();
$('#mm').data("currtab",subtitle);
return false;
});
}
//绑定右键菜单事件
function tabCloseEven()
{
//关闭当前
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close',currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
$('#tabs').tabs('close',t);
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function(){
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
if(t!=currtab_title)
$('#tabs').tabs('close',t);
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到头了,前边没有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
}
分享到:
相关推荐
在本主题中,我们将聚焦于“easyui tabs 右键关闭”这一功能,即如何在 EasyUI 的选项卡上实现类似浏览器的右键菜单,允许用户通过右键点击关闭当前选项卡。 首先,我们需要创建一个基本的 EasyUI 选项卡结构。这...
在本主题“EasyUI tabs 添加右键关闭菜单”中,我们将探讨如何为 EasyUI 的 tabs 组件添加自定义的右键菜单,实现点击右键时出现一个包含“关闭当前标签页”选项的菜单。 首先,我们需要了解 EasyUI 的 tabs 组件的...
根据给定的文件内容,以下是关于jQuery EasyUI右键菜单中关闭标签/选项卡的实例的知识点: 1. jQuery EasyUI是一个基于jQuery的前端框架,用于创建Web界面,它包括界面组件如数据网格、选项卡、对话框等。EasyUI的...
在本文中,我们将探讨如何使用jQuery EasyUI库来实现右键菜单中的特定选项变灰不可用的效果。jQuery EasyUI是一个基于jQuery的UI框架,它提供了一系列的组件,如表格、表单、窗口、菜单等,使得开发者能够快速构建富...
本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作,供大家参考,具体内容如下 目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind(...
在本示例中,我们将关注如何在EasyUI的Tab组件上添加右键菜单,实现包括刷新、关闭、全部关闭、关闭左侧和关闭右侧等操作。 首先,我们需要理解EasyUI的Tab组件。Tab组件是EasyUI中的一个核心组件,用于展示多个...
在本实例中,我们关注的是如何实现一个右键菜单,尤其是用于关闭标签页(选项卡)的功能。 首先,`noContextMenu.js` 文件的主要目的是屏蔽页面上的默认右键菜单。通过使用 `$(document).bind("contextmenu", ...
这个功能在许多Web应用程序中非常有用,允许用户通过右键点击选项卡来执行特定操作,如关闭当前选项卡、关闭所有选项卡等。我们将分为以下几个部分详细介绍实现这个功能的关键步骤。 首先,我们需要创建HTML结构,...
本文将详细探讨如何利用EasyUI的TabPanel(tabs)组件实现一个功能丰富的右键菜单,包括关闭当前、关闭其他、关闭左侧和关闭右侧的选项。 首先,让我们了解EasyUI的TabPanel组件。TabPanel是EasyUI中的一个核心组件...
在jQuery EasyUI框架中,Tabs组件是一个常用的选项卡界面实现方式,用于在同一个视图区域内切换显示不同的内容面板。本文档提供了Tabs组件的中文API使用说明,对于学习和使用jQuery EasyUI开发具有较高的参考价值。 ...
6. **其他组件**:除以上组件外,EasyUI还包括了诸如pagination(分页)、slider(滑块)、tabs(选项卡)等多种组件,每个都有详尽的示例供开发者参考。 7. **主题与定制**:EasyUI 提供了多种预设主题,同时也...
2. **组件介绍**:手册详细介绍了每个组件的用法,如`datagrid`(数据网格)用于展示和操作表格数据,`dialog`(对话框)用于弹出窗口,`menu`(菜单)用于创建下拉或右键菜单,`tabs`(选项卡)用于管理多个视图,`...
- `tabs`:选项卡,可以同时显示多个页面内容。 - `dialog`:对话框,用于展示模态或非模态内容,常用于用户交互。 - `menu`:菜单,支持多级结构,常用于下拉菜单或右键菜单。 - `form`:表单组件,包括各种...
在本文中,将重点介绍Jquery Easyui中的选项卡组件Tab的使用详解,帮助开发者深入理解如何使用Jquery Easyui的Tab组件来实现丰富的页面切换效果。通过实例代码的展示,本文将帮助读者学习到如何在Web应用中有效地...
选项卡 - Tabs 数据表格 数据表格 - Complex DataGrid 可编辑数据表格 - Editable DataGrid 带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 ...
打开新的标签页通常通过点击链接、菜单选项或者右键快捷菜单来实现,而关闭则可以通过点击标签页右上角的“X”按钮,或者使用快捷键完成。这样的交互设计符合大多数用户的习惯,易于理解和操作。 "关闭当前页"是...
- **closable**: 选项卡是否可关闭。 - **iconCls**: 图标类名。 **5.3. 用法** ``` <t:tabs id="tt" selected="tab1" fit="true"> ...