后台管理系统带关闭的选项卡（多标签页）功能 适配bootstrap3和4 Bootstrap Hover Dropdown

+function ($) {
    'use strict';

    var Selector = {
        mainTabs: '.main-tabs',
        tabsPage: '.tabs-page',
        tabsNav: '.tabs-nav',
        tabsNavLi: '.tabs-nav>li',
        tabClose: '.glyphicon-remove',
        mainIframes: '.main-iframes',
        iframeItem: '.iframe-item',
        tabsIframe: '.tabs-iframe',
    };

    var ClassName = {
        tabsThis: 'tabs-this',
        iframeItem: 'iframe-item',
        iframeShow: 'iframe-show',
        tabsIframe: 'tabs-iframe',
        tabClose: 'glyphicon-remove',
    };

    var Func = {
        addTabIframe: function (data) {
            var tabUl = $(Selector.tabsPage).children(Selector.tabsNav),
                tabUlLi = tabUl.children("li"),
                pageIndex = tabUlLi.length,
                title = data.title || "新标签页";

            //选项卡-tab
            var li = $('<li data-url="' + (data.url || "") + '"><span>' + title + '</span></li>'),
                remove = $('<i class="glyphicon glyphicon-remove"></i>');
            remove.on("click", Event.tabDelete);
            li.append(remove);
            tabUl.append(li);

            //选项卡-iframe
            $(Selector.mainIframes).append(['<div class="' + ClassName.iframeItem + '">', '<iframe src="' + (data.url || "") + '" frameborder="0" class="' + ClassName.tabsIframe + '"></iframe>', "</div>"].join(""));

            //设置当前选中选项
            Func.setTabThis(pageIndex);

            Func.rollPage(pageIndex); //tabs自适应
        },
        addTabExist: function (pageIndex) {
            //设置当前选中选项
            Func.setTabThis(pageIndex);
            Event.refresh();
            Func.rollPage(pageIndex); //tabs自适应
        },
        getTabExist: function (url) {
            var tabUl = $(Selector.tabsPage).children(Selector.tabsNav),
                tabUlLi = tabUl.children("li"),
                isExist = false,
                pageIndex = 0;

            tabUlLi.each(function (i) {
                var dataUrl = $(this).attr("data-url");
                if (dataUrl === url) {
                    isExist = true;
                    pageIndex = i;
                }
            });
            var data = { isExist: isExist, pageIndex: pageIndex };
            return data;
        },
        setTabThis: function (pageIndex) {
            //设置当前选中选项
            var tabUl = $(Selector.tabsPage).children(Selector.tabsNav),
                tabUlLi = tabUl.children("li"),
                iframeItem = $(Selector.mainIframes).children(Selector.iframeItem),
                tabsThis = ClassName.tabsThis,
                iframeShow = ClassName.iframeShow;

            tabUlLi.eq(pageIndex).addClass(tabsThis).siblings().removeClass(tabsThis)
            iframeItem.eq(pageIndex).addClass(iframeShow).siblings().removeClass(iframeShow);
        },
        pageIndex: function () {
            var tabsNavLi = $(Selector.tabsNavLi),
                tabsThis = ClassName.tabsThis;

            //获取当前选中项
            var index = 0;
            tabsNavLi.each(function (i) {
                var isThis = $(this).hasClass(tabsThis);
                if (isThis) {
                    index = i;
                }
            });
            //console.log(index);
            return index;
        },
        rollPage: function (pageIndex) {
            var pageIndex = pageIndex || Func.pageIndex();
            var ul = $(Selector.tabsNav),
                li = ul.children("li"),
                ulOuter = (ul.prop("scrollWidth"), ul.outerWidth()),
                ulLeft = parseFloat(ul.css("left"));

            var pageLi = li.eq(pageIndex);
            if (pageLi[0]) {
                var liLeft = pageLi.position().left; //相对于父元素的位置偏移
                var liOuter = pageLi.outerWidth();
                //console.log("pageIndex:" + pageIndex + " liLeft:" + liLeft + " liOuter:" + liOuter + " ulLeft:" + ulLeft + " ulOuter:" + ulOuter + "   " + (ulOuter - liLeft));
                //liLeft:647.578125 liOuter:86.7969 ulLeft:0 ulOuter:662   14.421875
                var lLeft = Math.round(liLeft + ulLeft);
                if (lLeft <= 0) {
                    ul.css("left", -liLeft);
                    return false;
                }
                else {
                    if (lLeft >= ulOuter) {
                        //console.log(1);
                        //ul 需要往左移动的长度
                        var ulLeftW = lLeft - ulOuter + liOuter;
                        ul.css("left", ulLeft - ulLeftW);
                        return false;
                    } else {
                        var liInUl = ulOuter - lLeft;
                        if (liInUl <= liOuter) {
                            //console.log(1);
                            //ul 需要往左移动的长度
                            var ulLeftW = liOuter - liInUl;
                            ul.css("left", ulLeft - ulLeftW);
                            return false;
                        }
                    }
                }
            }
        },
        tabAuto: function () {
            var tabsPage = $(Selector.tabsPage),
                ul = tabsPage.children(Selector.tabsNav);

            if (ul.prop("scrollWidth") > ul.outerWidth() + 1) {
                tabsPage.attr("overflow", "");
            } else {
                tabsPage.removeAttr("overflow");
            }
        },
        getIframeUrl: function (index) {
            var pageIndex = index || Func.pageIndex(),
                url = $(Selector.tabsNavLi).eq(pageIndex).attr("data-url");
            return url;
        },
    };
    var Event = {
        //tab-pages 新增事件
        tabAdd: function (data) {
            var tabExist = Func.getTabExist(data.url);
            var isExist = tabExist.isExist;//是否存在当前标签
            var pageIndex = tabExist.pageIndex;

            //不存在 新增tab、iframe
            if (!isExist) {
                //添加新的选项卡
                Func.addTabIframe(data);
            } else {
                //设置当前选中选项
                Func.addTabExist(pageIndex);
            }
            Func.tabAuto();
        },
        //tab-pages 点击事件
        tabClick: function () {
            //console.log("点击了选项卡");
            var r = $(this),
                pageIndex = r.index(),
                d = r.find("a");

            Func.setTabThis(pageIndex);

            Func.rollPage(pageIndex); //tabs自适应
            //"javascript:;" !== d.attr("href") && "_blank" === d.attr("target") || (, )
        },
        //tab-pages 删除事件
        tabDelete: function () {
            var currentLi = $(this).parent(),
                currentIndex = currentLi.index(),
                tabsThis = ClassName.tabsThis,
                currentIframe = $(Selector.mainIframes).children(Selector.iframeItem).eq(currentIndex);

            //如果删除的是当前选中项 需要先处理下一个选中项 然后再移除
            var pageIndex = currentIndex;
            var isThis = currentLi.hasClass(tabsThis);
            if (isThis) {
                var next = currentLi.next();
                if (next[0]) {
                    pageIndex = next.index();
                } else {
                    var prev = currentLi.prev();
                    if (prev[0]) {
                        pageIndex = prev.index();
                    }
                }

                //设置新的当前选中项
                Func.setTabThis(pageIndex);
            }
            currentLi.remove();//移除 tab
            currentIframe.remove(); //移除 iframe

            //当前选中项 index
            pageIndex = (pageIndex > currentIndex ? pageIndex : currentIndex) - 1;
            Func.rollPage(pageIndex);//tabs 自适应
            setTimeout(function () { Func.tabAuto() }, 50);
        },
        leftPage: function () {
            //console.log("出发了向左事件");
            var ul = $(Selector.tabsNav),
                li = ul.children("li"),
                ulOuter = (ul.prop("scrollWidth"), ul.outerWidth()),
                ulLeft = parseFloat(ul.css("left"));

            //ulLeft不可能>0，即只能<= 0
            if (ulLeft < 0) {
                var r = -ulLeft - ulOuter;
                li.each(function (e, t) {
                    var n = $(t),
                        liLeft = n.position().left;
                    //console.log(l)
                    if (liLeft >= r) {
                        ul.css("left", -liLeft);
                        return false;
                    }
                });
            }
            else
                return false;
        },
        rightPage: function () {
            //console.log("出发了向右事件");
            var ul = $(Selector.tabsNav),
                li = ul.children("li"),
                ulOuter = (ul.prop("scrollWidth"), ul.outerWidth()),
                ulLeft = parseFloat(ul.css("left"));

            li.each(function (e, t) {
                var n = $(t),
                    liLeft = n.position().left,
                    liOuter = n.outerWidth();

                var lLeft = Math.round(liLeft + ulLeft + liOuter);
                if (lLeft > ulOuter) {
                    var ulOuter2 = 2 * ulOuter;
                    if (lLeft >= ulOuter2) {
                        var liTemp = lLeft - ulOuter2;
                        if (liTemp <= liOuter) {
                            //console.log(1);
                            //ul 需要往左移动的长度
                            var ulLeftW = ulOuter + liTemp;
                            ul.css("left", ulLeft - ulLeftW);
                            return false;
                        }
                    } else {
                        var liCount = li.length;
                        var index = n.index() + 1; //li
                        var liTemp = ulOuter2 - lLeft;
                        if (index == liCount) {
                            //console.log(0);
                            //ul 需要往左移动的长度
                            var ulLeftW = ulOuter - liTemp;
                            ul.css("left", ulLeft - ulLeftW);
                            return false;
                        }
                    }
                }
            })
        },
        //关闭当前标签
        closeThisTabs: function () {
            //console.log("出发了关闭事件");
            var pageIndex = Func.pageIndex();
            //console.log(pageIndex);
            $(Selector.tabsNavLi).eq(pageIndex).find(Selector.tabClose).trigger("click")
        },
        //关闭其他标签
        closeOtherTabs: function () {
            var iframeItem = $(Selector.mainIframes).find(Selector.iframeItem);
            var pageIndex = Func.pageIndex();
            $(Selector.tabsNavLi).each(function (i) {
                var e = $(this);
                if (i != 0 && i != pageIndex) {
                    e.remove();
                    iframeItem.eq(i).remove();
                }
            });
            $(Selector.tabsNavLi).eq(Func.pageIndex()).trigger("click");
        },
        //关闭所有标签tabs
        closeAllTabs: function () {
            $(Selector.tabsNavLi + ":gt(0)").remove();
            $(Selector.mainIframes).find(".iframe-item:gt(0)").remove();
            $(Selector.tabsNavLi).eq(0).trigger("click");
        },
        //刷新iframe
        refresh: function () {
            var pageIndex = Func.pageIndex();
            var iframeItem = $(Selector.mainIframes).children(Selector.iframeItem);
            var iframe = iframeItem.eq(pageIndex).find(Selector.tabsIframe);

            //iframe[0].window.location.reload(true);
            //解决 iframe 跨域 刷新问题
            var url = Func.getIframeUrl(pageIndex);
            var newUrl = url + "?t=" + new Date().getTime();
            iframe[0].src = newUrl;
        },
    };

    //菜单点击事件
    $("body").on("click", "*[data-href]", function () {
        var e = $(this),
            t = e.attr("data-href"),
            i = e.attr("data-text");
        var data = { url: t, title: i || e.text() }
        Event.tabAdd(data);
    });
    //按钮事件
    $("body").on("click", "*[tabs-event]", function () {
        var e = $(this),
            t = e.attr("tabs-event");
        Event[t] && Event[t].call(this, e);
    });
    //绑定 pageTabs 点击事件
    $(Selector.mainTabs).on("click", Selector.tabsNavLi, Event.tabClick);

}(jQuery);