在使用easyui进行上左右布局一文中，我们已经使用easyui搭建起了一个简单的上左右布局。在使用的过程中，我们经常会遇到tab页打开的太多，但只能一个一个的关闭的烦恼，这个时候有没有想到eclipse中tab右键菜单的关闭其他和关闭所有选项呢？

下面我们就来使用easyui来实现tab页的关闭其他和关闭所有的功能。

1.在上一篇文章的html结构中添加入menu的结构

<body>

<div id="home-layout">

    <!-- 以前的code -->

</div>

<!-- tab页的右键菜单 -->

<div id="home-tabs-menu" class="easyui-menu">

    <div data-options="name:1">关闭</div>

    <div data-options="name:2">关闭其他</div>

    <div data-options="name:3">关闭所有</div>

</div>

</body>

2.为tab组件添加鼠标右键事件

<script>

　　/*

　　 * 初始化内容区的tabs

　　 */

    $("#home-tabs").tabs({

        fit : true,

        border : false,

        //为其附加鼠标右键事件

        onContextMenu: function(e, title, index){
　　　　　　　//该方法通知浏览器不要执行与此事件关联的默认动作
　　　　　　　//即屏蔽了浏览器在tab页上的鼠标右键事件

            e.preventDefault();

            var mm = $("#home-tabs-menu");

            //显示右键菜单

            mm.menu("show",{

                top: e.pageY,

                left: e.pageX

            }).data("tabTitle",title);

            //为右键菜单选项绑定事件

            mm.menu({

                onClick: function(item){

                    closeTab(this, item.name);

                }

            });

        }

    });

</script>

3.closeTab方法

<script>

/*

 * 关闭tab

 */

function closeTab(menu, type){

    var allTabs = $("#home-tabs").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");

    switch(type){

        case 1:

            //关闭当前

            $("#home-tabs").tabs("close", curTabTitle);

            return false;

            break;

        case 2:

            //关闭其他

            for(var i = 0; i < allTabTitle.length; i++){

                if(curTabTitle != allTabTitle[i]){

                    $("#home-tabs").tabs("close",allTabTitle[i]);

                }

            }

            $("#home-tabs").tabs("select",curTabTitle);

            break;

        case 3:

            //关闭所有

            for(var i = 0; i < allTabTitle.length; i++){

                $("#home-tabs").tabs("close",allTabTitle[i]);

            }

            break;

    }

}

</script>

这样就完成了tab页的右键菜单了，是不是使用起来很方便呢？当然，我们还可以继续在此基础上为它添加更多的功能！

使用easyui为tab页增加右键菜单的更多相关文章

  1. EasyUI 的Tab 标签添加右键菜单

    样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...

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

    在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...

  3. SNF快速开发平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右键菜单

    如题,我们在项目开发当中会遇到需要,表格控件增加右键菜单的使用. 下面我们就以SNF框架增加右键菜单步骤如下: 1.在加载页面当中增加如下菜单定义 <div id="mm" ...

  4. 仅在TabControl中的Tab中添加右键菜单

    若想实现仅在TabControl中的Tab中添加右键菜单,可在XAML中通过使用样式得到: <TabControl> <TabControl.ItemContainerStyle&g ...

  5. jquery easyui 中tab页添加其他页面，href与content的用法与区别

    //tab页增加 function addPanel(name,url){ var dd = $('#tt').tabs('exists',name); if(dd){ $('#tt').tabs(' ...

  6. easyui tab上面添加右键菜单

    说扩展,我觉得有点过了,只是加入了右击TAB选项卡时显示关闭的上下文菜单,先看下效果图: 具体实现代码: 右键菜单 HTML: <div id="mm" class=&quo ...

  7. 为jQuery-easyui的tab组件添加右键菜单功能

    加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: <div id="mm" class="easyui-menu" st ...

  8. Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件

    做个项目使用jquery  easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...

  9. Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页

    先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...

随机推荐

  1. WPF Combox实现下拉多选，可选中多个值

    自定义多选MultiCombox,可以实现下拉列表多选 using System; using System.Collections.Generic; using System.Collections ...

  2. Cell Reports | 上海瑞金医院糜坚青等揭示组蛋白酰化/乙酰化修饰比率调控BRD4基因组分布

    ​ 景杰生物 | 报道 组蛋白翻译后修饰,被认为构成一类超越基因序列的"组蛋白密码",控制着遗传信息的组织层次及其在染色质层面的解读.组蛋白赖氨酸乙酰化是研究最早的一类组蛋白修饰, ...

  3. java 注释,关键字和标识符

    注释 注释是为了防止当写代码的时间过久了之后,忘记了这行代码的意思或者是在一个大型的项目里面,不可能每一个模块的功能你都记得,所以需要一个注释来帮助记忆. 注释不会被执行 平时写代码一定要养成写注释的 ...

  4. .Net Core如何优雅的实现中间件

    在.Net Core的源码中,很多地方都有中间件的地方,Kestrel Server和Asp.net Core 等都用了中间件的设计,比如在Kestrel Server中,Http协议的1.0, 1. ...

  5. Eclipse的变量标记开关

    例如有如下代码: int var_a = 0; int var_b = var_a + 2; 当光标在var_a变量上时,Eclipse会将代码进行如下标记: int var_a = 0; int v ...

  6. linux服务器下TCP抓包

    1.首先ifconfig查看当前服务器的网卡信息 2.执行tcpdump -i ens160[网卡信息] -s 0 port 8080[监听的端口号] -w ./fileName.pcapng 3.可 ...

  7. SSM自学笔记（六）

    11.MyBatis的Dao层实现方式 1.MyBatis的Dao层实现 1.1 传统开发方式 编写UserDao接口 public interface UserDao { List<User& ...

  8. flutter学习资料汇总

    1.https://github.com/chinabrant/flutter_study 2.https://github.com/zhujian1989/flutter_study 3.https ...

  9. C#串口通信SeriPort 电表DLT645 RS234/RS485

    难受,三个多月前有一个电表电量监控的项目.做完了就没再管了.今天有需求需要改一些地方,但是....我想不起来干了啥,怎么干的啦.真的完全忘了.....项目名称叫啥都忘了.找了半天 不知道有没有和我一样 ...

  10. mybatis传入参数为0被误认为是空字符串的解决方法

    在mbatis中使用Xml配置sql语句时,出现了这样一个问题.当我传入的参数为0去做判断时,mybatis会把参数0当成是空字符串去判断而引起查询结果错误 所以在做项目时一定要注意,用到MyBati ...