个人开发基于jquery的类似浏览器的tab插件

因为项目的需要，网上也没发现开源好用的tab插件，所以自己简单的封装了一个tab插件，本插件需要用到jquery。

先看看效果图

首先明确功能需求 ，结合easyui的tab插件的功能，需要开发如下主要功能：

1.单击菜单栏，tab生成一个tab标签，同时内容栏得加载相应的内容

2.单击关闭的图标要关闭当前的etab标签同时移除tab标签对应的内容栏的内容

3.当tab标签的内容很多久可以点击tab的左右的按钮查看超出的tab标签

4.tab的右键的功能：关闭当前，关闭除当前的tab，关闭全部的tab，关闭左右的tab

5.双击关闭当前tab标签及移除对应的内容栏

js文件  

/**
 * Created by luorongsheng on 2017/2/20.
 * version :szjz.tab.js v1.0
 * author : RongShengLuo 
 * 
 */
(function(factory){
    if(typeof exports == "object" && typeof module == "object"){  // CommonJS
        factory(require('jquery'));
    }else if(typeof define == "function" && define.amd){     // AMD
        define(['jquery'],factory);
    }else{   // plain brower env
        factory(jQuery)
    }
})(function($){
    "use strict";
    window.conTab= {};
    $("#tab_index").click(function(){
    	$(this).addClass("active");
    	$(this).siblings().removeClass('active');
    	$("#cont-index").show();
    	$("#cont-index").siblings().hide();
    });
    conTab.add = function(option){
        // 如果菜单已经存在就激活菜单
        if(this.isExist(option.id)){
            this.click(option.id);
            return false;
        }
        this.addTab(option);
        this.AddContDiv(option);
        if(this.isBeyond()){
            this.scrollTab(option.id);
        }
        // 这里是否要考虑打开的方式
    };
    conTab.addTab = function(option){
        var _this = this;
        var id = option.id;
        var active = this.activeClass;
        var name = option.name;
        var title = option.title?option.title : "";
        var args = {id :id ,title : title,active :active,name :name};
        var html = this.getTabHtml(args);
        var element = $(html);
        var tab = $(".tab-list").append(element);
        this.click(option.id);
        _this.forbiBrowRightMenu(element);
        /* 绑定点击事件 */
        element.click(function(event){
            event.preventDefault();
            _this.click(option.id);
        });
        /* 绑定双击事件  */
        element.dblclick(function(){
                _this.close(option.id);
        });
        /* 绑定右键功能 */
        element.mousedown(function(event){
            var event = event || window.event;
            event.preventDefault();   // 为什么没有阻止默认行为
            if(event.button == 2){
                _this.tabMenu(event);   // 右键菜单
                _this.closeCurrentTab(id);   // 关闭当前按钮的事件绑定
                _this.closeTabAll();     // 关闭全部的按钮事件
                _this.closeNotCurrent(id);   // 关闭除当前的按钮事件
                _this.closeCurrentLeftTab(id);   // 关闭左边的tab
                _this.closeCurrentRightTab(id);
            }
        });
        element.find(".closeTab").click(function(){
            console.log('执行close方法');
            _this.close($(this).parents("li").attr("id"));
            return false;
        });

    };
    /* 要增加的tab的html */
    conTab.getTabHtml = function(args){
        var li ="<li id='"+args.id+"' title='"+args.title+"'>";
        li+="<a>"+args.name+"<i class='glyphicon glyphicon-remove-sign closeTab'style='font-style: normal;'></i></a>";
        return li;
    };
    /* 判断即将增加的tab是否存在*/
    conTab.isExist = function(id){
        return $(""+"#"+id).size() > 0;
    };
    /* 自定义的click函数，实现tab的选中状态和对应的div的显示*/
    conTab.click = function(id){
        $(".tab-list").find("li").removeClass("active");
        $("#"+id).addClass("active");
        this.loadContDiv(id);
    };
    /* 显示内容的div*/
    conTab.AddContDiv = function(option){
        var url = option.url;
        var id = this.getContDivId(option.id);
        //if(option.openType =="href"){
        	var html = "<div class='ceshi' id='"+id+"'></div>";
        //}
        var element = $(html);
        var container = $("#content-div");
        container.append(element);
        element.load(url);
        this.loadContDiv(option.id);
    };
    /* 加载对应的div的显示内容*/
    conTab.loadContDiv = function(id){
        var id = this.getContDivId(id);
        $("#"+id).siblings().hide();
        $("#"+id).show();
    };
    /* 通过tab的id得到对应的div的id*/
    conTab.getContDivId = function(id){
        return "tabDiv" + id;
    };
    /* 关闭功能*/
    conTab.close = function(id){
        var tab = $("#"+id);
        var ul = $(".tab-list");
        var liWidth = tab.width();
        var ulMarginLeft =parseInt(ul.css("margin-left"));
        var contDiv = $("#"+this.getContDivId(id));
        var isActive = tab.hasClass("active");
        if(isActive){
            if(tab.next().is("li")){
                tab.next().click();
            }else if(tab.prev().is("li")){
                tab.prev().click();
            }
        }
        tab.remove();
        contDiv.remove();    // 还有考虑的是关闭后应该打开哪一个页面
        this.indexPage();
        /* 需要滚动标签 */
        ulMarginLeft < 0 && ul.animate({
            "margin-left" : ulMarginLeft + liWidth > 0 ? 0 : ulMarginLeft + liWidth
        });
    },
        /* 右键功能 : 关闭当前，关闭左边，关闭右边，关闭全部,除了当前的全部关闭*/
        conTab.tabMenu = function(ev){
            /* 获取鼠标的当前坐标 */
            var x = ev.pageX;    // jq 的获取鼠标坐标方式
            var y = ev.pageY;
            var html = "<div class='tabMenu' style='position:absolute;width:150px;z-index:9999;left:"+(x+0)+"px;top:"+(y+0)+"px'><ul><li class='closeCurrent'>关闭当前tab</li><li class='closeAll'>关闭全部</li><li class='closeLeft'>关闭左边全部tab</li><li class='closeRight'>关闭右边全部tab</li><li class='closeOther'>关闭除当前的tab</li></ul></div>";
            var contextMenu = $(html);
            $("body").append(contextMenu);
            this.forbiBrowRightMenu(contextMenu);
            this.tabRightMenuEve();

        };
    /* 绑定右键事件 */
    conTab.tabRightMenuEve = function(){
        $(".tabMenu").on('mouseleave',function(){
            $(this).remove();
            return false;
        });
    };
    /* 禁止浏览器的默认的右键菜单  */
    conTab.forbiBrowRightMenu = function(element){
        element.on('contextmenu',function(event){
            event.preventDefault();
            return false;
        });
    };
    conTab.closeCurrentTab = function (id){
        var _this = this;
        $(".closeCurrent").on('click',function(){
            _this.close(id);
            $(".tabMenu").remove();
        });
    };
    /* 关闭全部的tab */
    conTab.closeTabAll = function (){
        var _this = this ;
        var tabs = _this.reverseArray($(".tab-list li"));
        $(".closeAll").on('click',function(){
                $.each(tabs, function(i,tab) {
                if($(tab).attr("id")!== "tab_index"){
                    _this.close($(tab).attr("id"));
                }
            });
               $(".tabMenu").remove();
        });
    };
    /* 关闭 除当前的其他全部的tab */
    conTab.closeNotCurrent = function (id){
        var _this = this;
        $(".closeOther").on('click',function(){
            var tabs = $(".tab-list li");
            $.each(tabs, function(i,tab) {
                if($(tab).attr("id")!== "tab_index" && $(tab).attr("id")!= id ){
                    _this.close($(tab).attr("id"));
                }
            });
            $(".tabMenu").remove();
        });
    };
    /* 关闭当前的左边的tab */
    conTab.closeCurrentLeftTab = function(id){
        var _this = this;
        $(".closeLeft").on('click',function(){
            var tabs = $("#"+id).prevAll();
            $.each(tabs, function(i ,tab) {
                if($(tab).attr("id")!== "tab_index"){
                    _this.close($(tab).attr("id"));
                }
            });
            $(".tabMenu").remove();
        });
    };
    /* 关闭当前的右边的tab */
    conTab.closeCurrentRightTab = function (id){
        var _this = this;
        $(".closeRight").on('click',function(){
            var tabs = $("#"+id).nextAll();
            $.each(tabs, function(i ,tab) {
                if($(tab).attr("id")!== "tab_index"){
                    _this.close($(tab).attr("id"));
                }
            });
            $(".tabMenu").remove();
        });
    };
    /* 滚动事件 */
    conTab.scrollTab = function (id){
        var ul = $(".tab-list");
        var marginLeft = parseInt(ul.css("margin-left"));
        var contanierWidth = $(".tab-nav").width();
        var liWidth = this.getAllTabWidth();
        var newLeft = contanierWidth - liWidth ;
        ul.animate({
            "margin-left":  newLeft
        });
    };
    $(".roll-left").on('click',function(){
        var ul = $(".tab-list");
        var liWidth = $(".tab-list").children().last().width();
        var ulMarginLeft =parseInt(ul.css("margin-left"));
        ulMarginLeft < 0 && ul.animate({
            "margin-left" : ulMarginLeft + liWidth > 0 ? 0 : ulMarginLeft + liWidth
        });
    });
    /* 查看左边隐藏标签 */
    $(".roll-right").on('click',function(){
        var ul = $(".tab-list");
        var contanier = $(".tab-nav").width();
        var liWidth = $(".tab-list").children().last().width();
        var lisWidth = conTab.getAllTabWidth();
        var ulMarginLeft =parseInt(ul.css("margin-left"));
        lisWidth + ulMarginLeft - contanier >liWidth ? ul.animate({
            "margin-left" : ulMarginLeft - liWidth
        }): lisWidth + ulMarginLeft < contanier ? 0 :ul.animate({
            "margin-left" : ulMarginLeft - (lisWidth + ulMarginLeft - contanier)
        });
    });
    /*  判断标签树是否已经超出内容区 */
    conTab.isBeyond = function (){
        var contanierWidth = $(".tab-nav").width();
        var liWidth = this.getAllTabWidth();
        return liWidth > contanierWidth;
    };
    /*  得到全部的tab长度 */
    conTab.getAllTabWidth = function (){
        var liWidth = 0;
        var lis = $(".tab-list li");
        $.each(lis, function(i ,li) {
            liWidth += $(li).width();
        });
        return liWidth;
    };
    /* 选中标签，如果标签不是全部在可视区则滑动标签 */
    conTab.activeScroll = function () {

    };
    /* 数组反转 */
    conTab.reverseArray = function (tabs) {
        var tabsRever =[];
        if(tabs){
            for(var i = tabs.length-1;i >= 0;i--){
                tabsRever.push(tabs[i]);
            }
        }
        return tabsRever;
    }
    /* 判断是否只剩下首页 */
    conTab.indexPage = function (){
    	if($(".ceshi").length == 0){
    		$("#cont-index").show();
    	}
    }
    
    /* 限制标签的个数  */
});

html结构

<div class="tab-header">
	<button type="button" class="fa fa-backward roll-nav roll-left "></button>
	<button type="button" class="fa fa-forward roll-nav roll-right"></button>
	<div class="tab-nav">
		<ul class="tab-list">
			<li class="active" id="tab_index"><a href="javascript:void(0);">首页</a></li>
		</ul>
	</div>
</div>

css 文件

/* tab 的样式 */
.tab-header{
	position: relative;
	border-bottom: 3px solid #3FC9D5;
	overflow: hidden;
	margin-bottom:10px;
}
.tab-nav{
	margin: 0;
	border: 0;
	position: relative;
	background-color: white;
	margin: 0 46px;
	overflow: hidden;
}
.tab-nav ul{
	background-color:#fafafa;
	display: block;
	height: 38px;
	width: 5000px;
	border-collapse: collapse;
	margin:0;
	padding:0;
}
.tab-nav ul li {
	list-style: none;
	float: left;
	cursor: pointer;
}
.tab-nav ul li a{
	padding: 9px 16px;
	display: inline-block;
	text-decoration: none;
	border-collapse:collapse;
	/*border-top-left-radius:5px!important;
	border-top-right-radius:5px!important;*/
	border-right:1px solid #ddd;
	border-bottom:1px solid transparent;
	font-size: 14px;
	color: gray;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.tab-nav ul li.active a{
	background-color:#3FC9D5;    /*#14B9D6*/
	color:white;
}
.roll-nav{
	position: absolute;
	height: 37px;
	width: 46px;
	border: 0;
	outline: none;
	cursor: pointer;
	background-color: white;
}
.roll-left{
	left: 0;
	top: 0;
	border-right: 1px solid lightgray;
}
.roll-right{
	right: 0;
	border-left: 1px solid lightgray;
	top: 0;
}
.ceshi{
	padding:0 15px;
}
.tabMenu{
	background-color: white;
	border-color:1px solid #e4e8ee;
	box-shadow: 5px 5px rgba(102, 102, 102, .1)
}
.tabMenu ul{
	margin:0;
	padding:0;
}
.tabMenu ul li{
	list-style:none;
	padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    border-bottom:1px solid #EFF2F6!important;
}
.tabMenu ul li:hover{
	background-color:#f6f6f6;
}

留下一个学习的脚步，毕竟是第一个版本，以后慢慢完善这个插件！

以后的你会感谢今天奋斗的自己