`
systemcookie
  • 浏览: 3473 次
社区版块
存档分类
最新评论

Easyui 右键关闭tabs选项

 
阅读更多
加入了右击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 tabs 右键关闭”这一功能,即如何在 EasyUI 的选项卡上实现类似浏览器的右键菜单,允许用户通过右键点击关闭当前选项卡。 首先,我们需要创建一个基本的 EasyUI 选项卡结构。这...

    EasyUI tabs添加右键关闭菜单

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

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

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

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

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

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

    本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作,供大家参考,具体内容如下 目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind(...

    Easyui添加Tab右键菜单

    在本示例中,我们将关注如何在EasyUI的Tab组件上添加右键菜单,实现包括刷新、关闭、全部关闭、关闭左侧和关闭右侧等操作。 首先,我们需要理解EasyUI的Tab组件。Tab组件是EasyUI中的一个核心组件,用于展示多个...

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

    在本实例中,我们关注的是如何实现一个右键菜单,尤其是用于关闭标签页(选项卡)的功能。 首先,`noContextMenu.js` 文件的主要目的是屏蔽页面上的默认右键菜单。通过使用 `$(document).bind("contextmenu", ...

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

    这个功能在许多Web应用程序中非常有用,允许用户通过右键点击选项卡来执行特定操作,如关闭当前选项卡、关闭所有选项卡等。我们将分为以下几个部分详细介绍实现这个功能的关键步骤。 首先,我们需要创建HTML结构,...

    easyui-tabbar右击弹出菜单

    本文将详细探讨如何利用EasyUI的TabPanel(tabs)组件实现一个功能丰富的右键菜单,包括关闭当前、关闭其他、关闭左侧和关闭右侧的选项。 首先,让我们了解EasyUI的TabPanel组件。TabPanel是EasyUI中的一个核心组件...

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    在jQuery EasyUI框架中,Tabs组件是一个常用的选项卡界面实现方式,用于在同一个视图区域内切换显示不同的内容面板。本文档提供了Tabs组件的中文API使用说明,对于学习和使用jQuery EasyUI开发具有较高的参考价值。 ...

    jquery-easyui-1.3.2 demo

    6. **其他组件**:除以上组件外,EasyUI还包括了诸如pagination(分页)、slider(滑块)、tabs(选项卡)等多种组件,每个都有详尽的示例供开发者参考。 7. **主题与定制**:EasyUI 提供了多种预设主题,同时也...

    jquery-easyui1.9.4中文参考手册.chm

    2. **组件介绍**:手册详细介绍了每个组件的用法,如`datagrid`(数据网格)用于展示和操作表格数据,`dialog`(对话框)用于弹出窗口,`menu`(菜单)用于创建下拉或右键菜单,`tabs`(选项卡)用于管理多个视图,`...

    jquery easyui1.2.1及demo

    - `tabs`:选项卡,可以同时显示多个页面内容。 - `dialog`:对话框,用于展示模态或非模态内容,常用于用户交互。 - `menu`:菜单,支持多级结构,常用于下拉菜单或右键菜单。 - `form`:表单组件,包括各种...

    Jquery Easyui选项卡组件Tab使用详解(10)

    在本文中,将重点介绍Jquery Easyui中的选项卡组件Tab的使用详解,帮助开发者深入理解如何使用Jquery Easyui的Tab组件来实现丰富的页面切换效果。通过实例代码的展示,本文将帮助读者学习到如何在Web应用中有效地...

    jQuery EasyUI 1.3 API 中文教程

    选项卡 - Tabs 数据表格 数据表格 - Complex DataGrid 可编辑数据表格 - Editable DataGrid 带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 ...

    类似139邮箱标签页

    打开新的标签页通常通过点击链接、菜单选项或者右键快捷菜单来实现,而关闭则可以通过点击标签页右上角的“X”按钮,或者使用快捷键完成。这样的交互设计符合大多数用户的习惯,易于理解和操作。 "关闭当前页"是...

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

    - **closable**: 选项卡是否可关闭。 - **iconCls**: 图标类名。 **5.3. 用法** ``` &lt;t:tabs id="tt" selected="tab1" fit="true"&gt; ...

Global site tag (gtag.js) - Google Analytics