01.关于easyui实现右键关闭tabs选项卡功能

js部分

            /*
       　　   *   添加右击table菜单栏事件
       　　   */
    $("#tabs").tabs({
        //为其附加鼠标右键事件
        onContextMenu: function(e, title, index){
            //该方法通知浏览器不要执行与此事件关联的默认动作
            //即屏蔽了浏览器在tab页上的鼠标右键事件
            e.preventDefault();
            var mm = $("#tabsmenu");
            //显示右键菜单
            mm.menu("show",{
                top: e.pageY,
                left: e.pageX
            }).data("tabTitle",title);
            //为右键菜单选项绑定事件
            mm.menu({
                onClick: function(item){
                    closeTab(this, item.name);
                }
            });
        }
    });

    /*
     * 关闭tabs方法的具体实现
     */
    function closeTab(menu, type){
        //返回所有的选项卡
        var allTabs = $("#tabs").tabs("tabs");
        var allTabTitle = [];
        // console.log(allTabs);这里是dom节点
        $.each(allTabs, function(i, n){
            // console.log(n);这里是当前打开的每一个tabs的jQuery对象
            //这里是返回的options对象
            var opt = $(n).panel("options");
            if(opt.closable){//如果显示关闭按钮
                //就把当前选中的选项卡的标题放入空数组中
                allTabTitle.push(opt.title);
            }
        });
        //这里是将获取当前选项卡的标题
        var curTabTitle = $(menu).data("tabTitle");
        switch(type){
            case 1:
                //关闭当前 -- 这里是根据选项卡的标题来关闭选项卡
                $("#tabs").tabs("close", curTabTitle);
                return false;
                break;
            case 2:
                //关闭其他
                for(var i = 0; i < allTabTitle.length; i++){
                    if(curTabTitle != allTabTitle[i]){
                        $("#tabs").tabs("close",allTabTitle[i]);
                    }
                }
                //这里是关闭完了其他选项卡之后，就选中当前选项卡
                $("#tabs").tabs("select",curTabTitle);
                break;


            case 3:
                //关闭右侧
                for(var i = 0; i < allTabTitle.length; i++){
                    //先通过循环遍历，获取出当前选项卡所对应的下标
                    if(curTabTitle == allTabTitle[i]){//相等的时候表示为当前，如果大于表示右侧，如果小于，表示左侧
                        //关闭右侧，其实就是关闭下标比当前下标大一些的选项卡
                        for (var j = i + 1; j < allTabTitle.length; j++) {
                            //然后这里的循环就从i+1开始，只要小于所有选项卡数组的长度，就直接删除
                            $("#tabs").tabs("close",allTabTitle[j]);//关闭右侧就关闭i+1
                        }
                    }
                }
                break;

            case 4:
                //关闭左侧
                for(var i = 0; i < allTabTitle.length; i++){
                    //先通过循环遍历，获取出当前选项卡所对应的下标
                    if(curTabTitle == allTabTitle[i]){//相等的时候表示为当前，如果大于表示右侧，如果小于，表示左侧
                        //这里关闭左侧的原理，就是关闭比当前选中选项卡的下标要小的选项卡
                        for (var j = 0; j < i; j++) {//这里就从0开始删，到i-1结束
                            //这里就是开始循环删除，只要j是小于i的就直接删除
                            $("#tabs").tabs("close",allTabTitle[j]);//关闭右侧就关闭i+1
                        }
                    }
                }
                break;

            case 5:
                //关闭所有
                for(var i = 0; i < allTabTitle.length; i++){
                    $("#tabs").tabs("close",allTabTitle[i]);
                }
                break;
        }
    }
});

html

    <%@include file="common/header.jsp"%>
<%--    --%>
    
    


<%--右键关闭选项卡--%>

    
关闭当前
    
关闭非当前
    
关闭右侧所有
    
关闭左侧所有
    
关闭所有