在使用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. laod

    https://iiio.io/download/20170120/ https://laod.cn/hosts/2017-google-hosts.html Copyright (c) 老D博客:h ...

  2. 表格技术七十二变|手把手教你用Canvas电子表格做电子签名

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 日常生活工作学习中,大家对电子表格必定不陌生.从工作数据汇总分析到出门收据各种电子发票,这些都是由电子表格制 ...

  3. 关于c++ STL map 和 unordered_map 的效率的对比测试

    本文采用在随机读取和插入的情况下测试map和unordered_map的效率 笔者的电脑是台渣机,现给出配置信息 处理器 : Intel Pentium(R) CPU G850 @ 2.90GHz × ...

  4. 单机版搭建kubernetes(K8s)

    准备 云原生的概念越来越火,忍不住去看了看kubernetes,初次接触,晕晕乎乎的,于是不管三七二十一,先搭建个单机版的再说(没钱买服务器,目前也懒得装虚拟机),跑起来也算是第一步吧.网上教程一顿搜 ...

  5. 热血动漫番太好看了！用Python爬取了1T的动漫，内存都爆了

    ​ ​ 最近被室友安利热血动漫番<终末的女武神>和<拳愿阿修罗>,太上头了周末休息熬夜看完了.不过资源不太好找,辣条一怒爬取了资源,这下可以看个够了.室友崇拜连连,想起了我的班 ...

  6. 常见的Web攻击手段，拿捏了！

    大家好,我是小菜. 一个希望能够成为 吹着牛X谈架构 的男人!如果你也想成为我想成为的人,不然点个关注做个伴,让小菜不再孤单! 本文主要介绍 互联网中常见的 Web 攻击手段 如有需要,可以参考 如有 ...

  7. Mantis安装过程笔记

    安装平台:Windows Server 2003 R2 Enterprise x64 Edition 软件: EasyPHP-5.3.6.1 mantisbt-1.2.6 安装过程: 首先安装Easy ...

  8. 北航面向对象OO第三单元——JML

    简介 本单元借助JML(Java Modeling Language),训练了我们关于的"规格(specification)"的意识和思想 本单元代码难度较低,简单来讲就是给你规定 ...

  9. mysql 常用见的错误处理

    一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...

  10. ubuntu编译安装python3.6.5

    去官网下载安装包放到~/software/   下 1更新软件库 sudo apt-get update 2安装相应的开发库 sudo apt-get install zlib1g-dev libbz ...