个人开发基于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");
4000

$.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;
}

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

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