前段时间有试着搭建个后台主题ui框架，有用到可支持滚动的Tab选项卡，模仿着中的代码造轮子改造了下，可惜代码在公司，不能把代码外发出来(感觉这样被限制了很多，对于这样的公司没办法，只能吐槽下这样的制度)，这样在公司造的轮子只能在家再敲一遍了。
本次主题讲的是实现一个可轮播滚动的Tab选项卡列表，自己封装成了一个小轮子，有什么不对的地方，希望各位大师多多指出，给予一个进步的空间。
首先把HTML代码贴出来
CSS部分：
*{ padding: 0;margin: 0;} .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: 0; height: 40px; width: 40px; outline: 0; cursor: pointer; } .content-tabs .roll-nav,.page-tabs-list { position: absolute; width: 40px; height: 40px; text-align: center; color: #999; z-index: 2; top: 0 } .content-tabs .roll-left { left: 0; border-right: solid 1px #eee } .content-tabs .roll-right { right: 0; 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("Tab"+(i+1)+"");}$('.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选项卡列表了。