全面實用的Tab切換

時間 2019-11-20

標籤全面實用 tab 切換简体版

原文原文鏈接

背景：因爲公司在作一個web項目，裏面須要用到tab切換，可是網上的不少例子雖然實現了tab的切換可是使用起來缺不是很方便，爲此我將本身項目中反覆修改後比較全面tab切換分享出來，供你們參考，結尾處會附上源碼地址。css

Tab切換的主要功能：html

1.tab頁籤的建立和對應頁面的生成。java

2.tab頁標籤導航欄左右滑動。jquery

3.豎直導航。git

4.右擊事件（刷新、關閉、關閉其餘、關閉全部）。github

首先來一波在線演示：https://wangjie1234.github.io/tab/index.html。web

效果圖：閉包

廢話很少說，上代碼。app

核心代碼：index.html入口，注意在主頁面要顯式的加載初始化的一些數據$(".menu a").tab();

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery打開多個標籤頁能夠左右移動</title>
<meta charset="utf-8" />
<link href="css/tabstyle.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/tab.js"></script>
</head>
<div class="wapper">
    <div class="menu">
        <a href="content.html#1">菜單管理</a>
        <a href="content.html#2">角色管理</a>
        <a href="content.html#3">人員管理</a>
        <a href="content.html#4">角色權限配置</a>
        <a href="content.html#5">用戶管理</a>
        <a href="content.html#6">工單管理</a>
        <a href="content.html#7">建立新裝單</a>
        <a href="content.html#8">查詢單據</a>
        <a href="content.html#9">費用管理</a>
        <a href="content.html#10">財務報賬</a>
        <a href="content.html#11">企業維護</a>
        <a href="content.html#12">省份維護</a>
        <a href="content.html#13">國家維護</a>
        <a href="content.html#14">GPS地址位置管理</a>
        <a href="content.html#15">點管理</a>
        <a href="content.html#16">沒有了</a>
        <a href="content.html#17">別點了</a>
        <a href="content.html#18">再點也沒有了</a>
        <a href="content.html#19">不信？</a>
        <a href="content.html#20">隨你了</a>
        <a href="content.html#21">開心就好</a>        </div>
    <!--菜單HTML Start-->
    <div id="page-tab">
        <button class="tab-btn" id="page-prev"></button>
        <nav id="page-tab-content">
            <div id="menu-list">                </div>
        </nav>
        <button class="tab-btn" id="page-next"></button>
        <div id="page-operation">
            <div id="menu-all">
                <ul id="menu-all-ul">
                </ul>
            </div>
        </div>
    </div>
    <!--菜單HTML End-->
    <!--iframe Start (根據頁面頂部佔用高度，自行調整高度數值)-->
    <div id="page-content" style="height: calc(100%);">        </div>
    <!--iframe End-->
</div>

<script>
//初始化a標籤連接到tab
$(".menu a").tab();
</script>

</body>
</html>

核心的js代碼：

var tabPlug=(function($, window, document) {
    var scrollSetp = 500,
    operationWidth = 90,
    leftOperationWidth = 30,
    animatSpeed = 150,
    linkframe = function(url, value) {
        $("#menu-list a.active").removeClass("active");
        $("#menu-list a[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
        $("#page-content iframe.active").removeClass("active");
        $("#page-content .iframe-content[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
        $("#menu-all-ul li.active").removeClass("active");
        $("#menu-all-ul li[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
    },
    move = function(selDom) {
        var nav = $("#menu-list");
        var releft = selDom.offset().left;
        var wwidth = parseInt($("#page-tab").width());
        var left = parseInt(nav.css("margin-left"));
        if (releft < 0 && releft <= wwidth) {
            nav.animate({
                "margin-left": (left - releft + leftOperationWidth) + "px"
            },
            animatSpeed);
        } else {
            if (releft + selDom.width() > wwidth - operationWidth) {
                nav.animate({
                    "margin-left": (left - releft + wwidth - selDom.width() - operationWidth) + "px"
                },
                animatSpeed);
            }
        }
    },
    createmove = function() {
        var nav = $("#menu-list");
        var wwidth = parseInt($("#page-tab").width());
        var navwidth = parseInt(nav.width());
        if (wwidth - operationWidth < navwidth) {
            nav.animate({
                "margin-left": "-" + (navwidth - wwidth + operationWidth) + "px"
            },
            animatSpeed)
        }
    },
    closemenu = function() {
        $(this.parentElement).animate({
            "width": "0",
            "padding": "0"
        },
        0,
        function() {
            var jthis = $(this);
            if (jthis.hasClass("active")) {
                var linext = jthis.next();
                if (linext.length > 0) {
                    linext.click();
                    move(linext)
                } else {
                    var liprev = jthis.prev();
                    if (liprev.length > 0) {
                        liprev.click();
                        move(liprev)
                    }
                }
            }
            //刪除導航標籤
            this.remove();
            //刪除對應的iframe標籤
            $("#page-content .iframe-content[data-url='" + jthis.data("url") + "'][data-value='" + jthis.data("value") + "']").remove()
            //刪除右邊快捷導航對應的標籤
            $("#menu-all-ul [data-url='" + jthis.data("url")+"']").remove();
        });
        event.stopPropagation();
    },
    init = function() {
        $("#page-prev").bind("click",
        function() {
            var nav = $("#menu-list");
            var left = parseInt(nav.css("margin-left"));
            if (left !== 0) {
                nav.animate({
                    "margin-left": (left + scrollSetp > 0 ? 0 : (left + scrollSetp)) + "px"
                },
                animatSpeed);
            }
        });
        $("#page-next").bind("click",
        function() {
            var nav = $("#menu-list");
            var left = parseInt(nav.css("margin-left"));
            var wwidth = parseInt($("#page-tab").width());
            var navwidth = parseInt(nav.width());
            var allshowleft = -(navwidth - wwidth + operationWidth);
            if (allshowleft !== left && navwidth > wwidth - operationWidth) {
                var temp = (left - scrollSetp);
                nav.animate({
                    "margin-left": (temp < allshowleft ? allshowleft: temp) + "px"
                },
                animatSpeed);
            }
        });
        $("#page-operation").bind("click",
        function() {
            var menuall = $("#menu-all");
            if (menuall.is(":visible")){
                menuall.hide();
            } else {
                menuall.show();
            }
        });
        $("body").bind("mousedown",function(event) {
            if (! (event.target.id === "menu-all" || event.target.id === "menu-all-ul" || event.target.id === "page-operation" || event.target.id === "page-operation" || event.target.parentElement.id === "menu-all-ul")) {
                $("#menu-all").hide()
            }
            event.stopPropagation();
        })
    };
    $.fn.tab = function(){
        init();
        this.bind("click",
        function(){
            var linkUrl = this.href;
            var linkHtml = this.text.trim();
            var selDom = $("#menu-list a[data-url='" + linkUrl + "'][data-value='" + linkHtml + "']");
            if (selDom.length === 0) {
                var iel = $("<i>", {
                    "class": "menu-close"
                }).bind("click", closemenu);
                $("<a>", {
                    "html": linkHtml,
                    "href": "javascript:void(0);",
                    "data-url": linkUrl,
                    "data-value": linkHtml
                }).bind("click",
                function() {
                    var jthis = $(this);
                    linkframe(jthis.data("url"), jthis.data("value"))
                }).append(iel).appendTo("#menu-list");
                $("<iframe>", {
                    "class": "iframe-content",
                    "data-url": linkUrl,
                    "data-value": linkHtml,
                    src: linkUrl
                }).appendTo("#page-content");
                $("<li>", {
                    "html": linkHtml,
                    "data-url": linkUrl,
                    "data-value": linkHtml
                }).bind("click",
                function() {
                    var jthis = $(this);
                    linkframe(jthis.data("url"), jthis.data("value"));
                    move($("#menu-list a[data-url='" + linkUrl + "'][data-value='" + linkHtml + "']"));
                    $("#menu-all").hide();
                    event.stopPropagation();
                }).appendTo("#menu-all-ul");
                createmove();
            } else {
                move(selDom);
            }
            linkframe(linkUrl, linkHtml);
            return false;
        });
        return this;
    }
    /***
     * 將內部函數做爲返回值返回，造成閉包。
     * 在函數外部能夠調用。
     * */
    return {
        closemenu:closemenu
        ,linkframe:linkframe
    }
})(jQuery, window, document);
  /**
     * 右擊事件
     * */
    //取消右鍵  
    $('html').on('contextmenu', function (){return false;}).click(function(){  
        $('.popup_menu').hide();  
    });  
    //註冊右擊事件
    $('html').on('contextmenu','a',function(e){
        var that= this;
        var popupmenu = kyoPopupMenu.initContextmenu(that);  
        l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;  
        t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;  
        popupmenu.css({left: l,top: t}).show();  
        return false;  
    });  
    //生成右擊事件菜單
    var kyoPopupMenu={};  
    kyoPopupMenu = (function(){ 
    return {  
        initContextmenu: function (obj) {
            //獲取當前觸發右鍵點擊事件的table的ID
            $('.popup_menu').remove(); 
            var html='<div class="popup_menu">';
                    html+='<ul style="list-style:none;margin:0;    padding:0;font-size:12px;">';
                    html+='<li><a menu="updateTab">刷新</a></li>';
                    html+='<li><a menu="closeTab">關閉</a></li>';
                    html+='<li><a menu="closeOther">關閉其餘</a></li>';
                    html+='<li><a menu="closeAll">關閉全部</a></li>';
                    html+='</ul>';
                    html+='</div>';
            popupMenuApp = $(html).find('a').attr('href','javascript:;').end().appendTo('body');  
            //綁定事件  
            $('.popup_menu a[menu="updateTab"]').on('click', function (){  
                //刷新當前的
                tabPlug.linkframe($(obj).attr('data-url'),$(obj).attr('data-value'));
            });  
            $('.popup_menu a[menu="closeTab"]').on('click', function (){  
                //關閉當前選中的
                tabPlug.closemenu.call($(obj).find('.menu-close')[0]);
            });  
            $('.popup_menu a[menu="closeOther"]').on('click', function (){  
                //關閉除了選中的其餘tab
                $.each($(obj).siblings(), function() {
                    tabPlug.closemenu.call($(this).find('.menu-close')[0]);
                });
                $('.popup_menu').hide();  
            });  
            $('.popup_menu a[menu="closeAll"]').on('click', function (){  
                $('#menu-list a').each(function(){
                    //關閉全部，除了首頁
                    tabPlug.closemenu.call($(this).find('.menu-close')[0]);
                });
                $('.popup_menu').hide();  
            }); 
            return popupMenuApp;  
        }  
    }})();