前段时间有试着搭建个后台主题ui框架，有用到可支持滚动的Tab选项卡，模仿着H+后台主题ui框架中的代码造轮子改造了下，可惜代码在公司，不能把代码外发出来(感觉这样被限制了很多，对于这样的公司没办法，只能吐槽下这样的制度)，这样在公司造的轮子只能在家再敲一遍了。
本次主题讲的是实现一个可轮播滚动的Tab选项卡列表，自己封装成了一个小轮子，有什么不对的地方，希望各位大师多多指出，给予一个进步的空间。
首先把HTML代码贴出来
<div class="content-tabs">
<button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"><<</i></button>
<nav class="page-tabs J_menuTabs">
<div class="page-tabs-content">
</div>
</nav>
<button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward">>></i></button>
</div>
CSS部分：
*{padding:;margin:;}
.content-tabs {
position: relative;
height: 42px;
background: #fafafa;
line-height: 40px
}
.page-tabs a {
display: block;
float: left;
border-right: solid 1px #eee;
padding: 0 15px;
color: #fff;
background: #EC0D35;
text-decoration: none;
}
nav.page-tabs {
margin-left: 40px;
width: 100000px;
height: 40px;
overflow: hidden
}
nav.page-tabs .page-tabs-content {
float: left
}
.content-tabs button {
background: #fff;
border:;
height: 40px;
width: 40px;
outline:;
cursor: pointer;
}
.content-tabs .roll-nav,.page-tabs-list {
position: absolute;
width: 40px;
height: 40px;
text-align: center;
color: #999;
z-index:;
top: 0
}
.content-tabs .roll-left {
left:;
border-right: solid 1px #eee
}
.content-tabs .roll-right {
right:;
border-left: solid 1px #eee
}
.page-tabs a.active {
background: #2f4050;
color: #a7b1c2
}
在此循环出30个选项卡展示其效果：
for(var i=0; i<30; i++){
$('.page-tabs-content').append("<a href='javascript:;' class='J_menuTab'>Tab"+(i+1)+"</a>");
}
$('.page-tabs-content').children().first().addClass('active');
页面效果如下：
自己造的轮子代码如下：
;(function($){
var TabElement = function(option){
this.option = option;
}
TabElement.prototype = {
'f': function(l){
var k = 0;
$(l).each(function() {
k += $(this).outerWidth(true);
});
return k;
},
'prevTab': function(){
var that = this;
var o = Math.abs(parseInt($(that.option.tab_list).css("margin-left")));
var l = that.f($(that.option.content_tab).children().not(that.option.nav_tab));
var k = $(that.option.content_tab).outerWidth(true) - l;
var p = 0;
if ($(that.option.tab_list).width() < k) {
return false
} else {
var m = $(that.option.tab_list).children().first();
var n = 0;
while ((n + $(m).outerWidth(true)) <= o) {
n += $(m).outerWidth(true);
m = $(m).next()
}
n = 0;
if (that.f($(m).prevAll()) > k) {
while ((n + $(m).outerWidth(true)) < (k) && m.length > 0) {
n += $(m).outerWidth(true);
m = $(m).prev()
}
p = that.f($(m).prevAll())
}
}
$(that.option.tab_list).animate({
marginLeft: 0 - p + "px"
}, "fast")
},
'nextTab': function(){
var that = this;
var o = Math.abs(parseInt($(that.option.tab_list).css("margin-left")));
var l = that.f($(that.option.content_tab).children().not(that.option.nav_tab));
var k = $(that.option.content_tab).outerWidth(true) - l;
var p = 0;
if ($(that.option.tab_list).width() < k) {
return false
} else {
var m = $(that.option.tab_list).children().first();
var n = 0;
while ((n + $(m).outerWidth(true)) <= o) {
n += $(m).outerWidth(true);
m = $(m).next()
}
n = 0;
while ((n + $(m).outerWidth(true)) < (k) && m.length > 0) {
n += $(m).outerWidth(true);
m = $(m).next()
}
p = that.f($(m).prevAll());
if (p > 0) {
$(that.option.tab_list).animate({
marginLeft: 0 - p + "px"
}, "fast")
}
}
},
'goTab': function(n){
var that = this;
var o = that.f($(n).prevAll()), q = that.f($(n).nextAll());
var l = that.f($(that.option.content_tab).children().not(that.option.nav_tab));
var k = $(that.option.content_tab).outerWidth(true) - l;
var p = 0;
if ($(that.option.tab_list).outerWidth() < k) {
p = 0
} else {
if (q <= (k - $(n).outerWidth(true) - $(n).next().outerWidth(true))) {
if ((k - $(n).next().outerWidth(true)) > q) {
p = o;
var m = n;
while ((p - $(m).outerWidth()) > ($(that.option.tab_list).outerWidth() - k)) {
p -= $(m).prev().outerWidth();
m = $(m).prev()
}
}
} else {
if (o > (k - $(n).outerWidth(true) - $(n).prev().outerWidth(true))) {
p = o - $(n).prev().outerWidth(true)
}
}
}
$(that.option.tab_list).animate({
marginLeft: 0 - p + "px"
}, "fast")
}
};
$.fn.menuTab = function(option){
var opt = $.extend({},option);
return new TabElement(opt);
}
})(jQuery)
最后初始化插件及绑定事件就可以了
var TabMenu = $('.content-tabs').menuTab({
'content_tab':'.content-tabs',
'nav_tab':'.page-tabs',
'tab_list':'.page-tabs-content'
});
$('.J_tabRight').on('click',function(){
TabMenu.nextTab();
})
$('.J_tabLeft').on('click',function(){
TabMenu.prevTab();
})
$('.J_menuTab').on('click',function(){
$('.J_menuTab.active').removeClass('active');
$(this).addClass('active');
TabMenu.goTab($(this));
})
这样，就实现了一个可轮播滚动的Tab选项卡列表了。
![[js高手之路]jquery插件开发实战-选项卡详解](https://www.kunjuke.com/file/css/thumb/8.jpg/280-180.jpg)
