easyUi多个标签关闭功能

最新推荐文章于 2022-05-23 15:45:53 发布

hu_xian_

最新推荐文章于 2022-05-23 15:45:53 发布

阅读量334

点赞数

分类专栏： ssj 文章标签： easyui 多个标签关闭

本文链接：https://blog.csdn.net/hu_xian_/article/details/95616848

版权

ssj 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求

左键tab可以选择关闭自己窗口与其它窗口，但是第一个主窗口不能关闭

效果
在这里插入图片描述 代码

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/5
  Time: 18:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/WEB-INF/views/head.jsp" %>
    <script>
        $(function () {
            var mainTab = $("#mainTab");
            $('#menuTree').tree({
                url:'/json/menu.json',
                onClick: function(node){
                    console.debug(node)
                    //获取相应路径
                    var nodeUrl = node.url;
                    if(!nodeUrl){
                        //如果没有路径，就不需要打开新页面
                        return;
                    }
                    //拿到菜单名称
                    var nodeTitle = node.text;
                    //判断这个菜单名称卡是否已经存在
                    if(mainTab.tabs("exists",nodeTitle)){
                        //如果存在，选中这个菜单
                        mainTab.tabs("select",nodeTitle)
                        return;
                    }
                    // 添加一个新的选项卡
                    mainTab.tabs('add',{
                        //选项卡名称
                        title:nodeTitle,
                        //是否可以关闭
                        closable:true,
                        //当前选项卡的内容
                        content:'<iframe src="'+node.url+'" width="100%" height="100%" frameborder="0">'
                    });
                }

            });
        })
        //展示table的菜单
        function showTabMenu(e,title,index) {
            //第0个位置的面板不支持相应功能
            e.preventDefault();
            if(index==0)return;
            $('#tabMenu').menu('show', {
                left: e.pageX,
                top: e.pageY,
                onClick:function(item){
                    if(item.text == "关闭窗口"){
                        $('#mainTab').tabs('close', index);
                    }else if(item.text == "关闭所有窗口"){
                        var tabs = $('#mainTab').tabs('tabs');
                        //第0个位置的面板不关闭
                        for(var i=1;i<=tabs.length;i++){
                            //注意，这时永远关掉第一个面板
                            $('#mainTab').tabs('close', 1);
                        }
                    }
                }
            });
        }

    </script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:100px;text-align: center;color: blue">
    <h1 >来来来,以钱赚钱啦!</h1>
    <%--shiro:principal：显示主体名称--%>
    <div style="text-align: right;padding-right:20px;">欢迎您,<shiro:principal /> <a href="/logout">登出</a></div>
</div>
<div data-options="region:'west',title:'菜单',split:true" style="width:230px;">
    <ul id="menuTree"></ul>
</div>
<div id="mainTab"  class="easyui-tabs"  data-options="region:'center',onContextMenu:showTabMenu">
    <div title="首页" style="text-align: center;padding-top:100px;font-size: 40px ;color: orangered" >
        少年,你渴望力量吗? <br/><br/>花钱你才能变得更强
    </div>
</div>
<div id="tabMenu" class="easyui-menu" style="width:120px;">
    <div data-options="iconCls:'icon-clear'" >关闭窗口</div>
    <div data-options="iconCls:'icon-remove'">关闭所有窗口</div>
</div>

</body>
</html>