easyui页面中tabs选项卡右击实现选择关闭全部，其他，左侧，右侧标签功能

效果图：
代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>智销系统</title>
    <%@ include file="/WEB-INF/views/head.jsp"%>   <%-- 这个是我抽取到外面的公共css，js插件 --%>
    <script>
        $(function(){
            //显示选项卡
            $("#menuTree").tree({
                url:"/json/menu.json",
                onClick: function(node){
                    if(node.url){
                        var nodeName = node.text;
                        //判断这个选项卡是否已经存在，存在就选中，不存在重新打开
                        var tab = $("#mainTabs").tabs("getTab",nodeName);
                        if(tab){
                            $("#mainTabs").tabs("select",nodeName);
                        }else{
                            //iframe:在一个页面中嵌入另一个页面(单独的)
                            var content = '<iframe scrolling="auto" frameborder="0"  src="'+node.url+'" style="width:100%;height:100%;"></iframe>';
                            $("#mainTabs").tabs('add',{
                                title:nodeName,
                                content:content,
                                closable:true
                            });
                        }
                    }
                }
            });
//====================================================================================

            //tab右键触发时候所触发的函数
            $("#mainTabs").tabs({
                onContextMenu:function(e, title) {
                    //在每个菜单选项中添加title值
                    var $divMenu = $("#tab_rightmenu div[id]");
                    $divMenu.each(function() {
                        $(this).attr("id", title);
                    });
                    //显示menu菜单
                    $('#tab_rightmenu').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                    e.preventDefault();
                }
            });
            //实例化menu点击触发事件
            $('#tab_rightmenu').menu({
                "onClick":function(item) {
                    closeTab(item.id,item.text);
                }
            });
        })

        //关闭选项卡功能    注意：还需要上面的 .tabs和.menu右击触发事件显示菜单功能哦
        function closeTab(title, text) {
            if(text == '关闭全部标签') {
                $(".tabs li").each(function(index, obj) {
                    //获取所有可关闭的选项卡
                    var tabTitle = $(".tabs-closable", this).text();
                    $("#mainTabs").tabs("close", tabTitle);
                });
            }
            if(text == '关闭其他标签') {
                $(".tabs li").each(function(index, obj) {
                    //获取所有可关闭的选项卡
                    var tabTitle = $(".tabs-closable", this).text();
                    if(tabTitle != title) {
                        $("#mainTabs").tabs("close", tabTitle);
                    }
                });
            }
            if(text == '关闭右侧标签') {
                var $tabs = $(".tabs li");
                for(var i = $tabs.length - 1; i >= 0; i--) {
                    //获取所有可关闭的选项卡
                    var tabTitle = $(".tabs-closable", $tabs[i]).text();
                    if(tabTitle != title) {
                        $("#mainTabs").tabs("close", tabTitle);
                    } else {
                        break;
                    }
                }
            }
            if(text == '关闭左侧标签') {
                var $tabs = $(".tabs li");
                for(var i = 0; i < $tabs.length; i++) {
                    //获取所有可关闭的选项卡
                    var tabTitle = $(".tabs-closable", $tabs[i]).text();
                    if(tabTitle != title) {
                        $("#mainTabs").tabs("close", tabTitle);
                    } else {
                        break;
                    }
                }
            }
        }
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north'" style="height:60px;">
        <h3>xx智销系统</h3>
    </div>
    <div data-options="region:'west',title:'菜单',split:true" style="width:200px;">
        <ul id="menuTree"></ul>
    </div>
    <div id="mainTabs" class="easyui-tabs" data-options="region:'center'<%--,onContextMenu:showTabMenu--%>">
        <div title="主页面">
            xxx
        </div>
    </div>
<%--===========================================================================--%>
    <!--关闭tab选项的隐藏div菜单-->
    <div id="tab_rightmenu" class="easyui-menu" style="width:135px; display:none">
        <div name="tab_menu-tabcloseall" id="closeAll" data-options="iconCls:'icon-cancel'">关闭全部标签</div>
        <div name="tab_menu-tabcloseother" id="closeOthor" data-options="iconCls:'icon-clear'">关闭其他标签</div>
        <div class="menu-sep"></div>
        <div name="tab_menu-tabcloseright" id="closeRight" data-options="iconCls:'icon-redo'">关闭右侧标签</div>
        <div name="tab_menu-tabcloseleft" id="closeLeft" data-options="iconCls:'icon-undo'">关闭左侧标签</div>
    </div>
</body>
</html>
easyui页面中tabs选项卡右击实现选择关闭全部，其他，左侧，右侧标签功能

猜你喜欢
