在使用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. 桌面小部件AppWidgetProvider简单分析

    1.一般桌面小部件涉及到的类 AppWidgetProvider :BroadcastRecevier子类,用于接收更新,删除通知 AppWidgetProvderInfo:AppWidget相关信息 ...

  2. 软件安装管理（RPM）

    目录 一.linux应用程序 1.1 应用程序与系统命令关系 1.2 典型应用程序的目录结构 1.3 常见的软件包封装工具 二.RPM软件包管理工具 2.1RPM软件包管理器Red-Hat Packa ...

  3. SpringSecurity：简单入门

    SpringSecurity能做什么 SpringSecurity是一个安全框架,使用它可以让我们的系统变得安全一点,它可以对登陆系统的用户进行验证和授权 一个安全的系统需要做的事情很多,比如:防SQ ...

  4. TCP拥塞控制详解

    1. 拥塞原因与代价 拥塞的代价 当分组的到达速率接近链路容量时,分组经历巨大的排队时延. 发送方必须执行重传以补偿因为缓存溢出而丢弃的分组. 发送方在遇到大时延时进行的不必要重传会引起路由器利用其链 ...

  5. 用于在公网环境下测试的Telnet/SSH服务器

    google: public telnet server list for example: telnet nethack.alt.org ssh nethack@alt.org

  6. CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记

    CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记 cas服务器的搭建 导出证书(1和2步骤是找了课程,随便写了一下存记录,不过对于自己测试不投入使用应该不影响) C:\Users\D ...

  7. tomcat服务监控分析及自启

    #! /bin/bash # process-monitor.sh serverName="/usr/local/apache-tomcat-7.0.72-8080" #获取进程i ...

  8. SpringCloud升级之路2020.0.x版-14.UnderTow AccessLog 配置介绍

    本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford server: u ...

  9. Java入门姿势【面向对象3】构造方法及其重载_方法的调用

    上次我为大家写出啦"定义类与创建对象_了解局部变量",上篇文章代码可能较多,如没有了解透彻的话请打开下方文章在进行观看一下哦!! [Java入门姿势[面向对象2]定义类与创建对象_ ...

  10. Abp vNext 基础篇丨领域构建

    介绍 我们将通过例⼦介绍和解释⼀些显式规则.在实现领域驱动设计时,应该遵循这些规则并将其应⽤到解决⽅案中. 领域划分 首先我们先对比下Blog.Core和本次重构设计上的偏差,可以看到多了一个博客管理 ...