前段时间有试着搭建个后台主题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选项卡列表了。

可轮播滚动的Tab选项卡的更多相关文章

  1. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  2. 使用JS实现图片轮播滚动跑马灯效果

    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...

  3. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

  4. 焦点轮播图(tab轮播)

    主要有两部分:1.列表导航(小图片) 2.展示区(大图片) 页面布局: HTML部分:    <div class="s_conC">                  ...

  5. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  6. 简要分析javascript的选项卡和轮播图

    选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...

  7. JavaScript—原生轮播和无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 慕课网6-2 作业:js实现轮播特效

    小伙伴们,掌握了JavaScript的语法.流程控制语句.内置对象以及DOM和BOM的知识,运用所学知识完成如下图所示的交互效果——轮播图.效果图如下: 具体交互效果图参考gif动态效果图,gif效果 ...

  9. vue轮播组件及去掉路由#

    最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能.vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取 ...

随机推荐

  1. MongoDB 使用Index

    Index 能够提高查询的性能,如果没有Index,MongoDB必须扫描整个collection,从collection的第一个doc开始,直到最后一个doc,即使第一个doc之后的所有doc都不满 ...

  2. MVC4做网站六后台管理:6.2网站信息设置

    用来实现网站标题.名称.关键字.描述.版权等信息的设置. 模型字段: 网站的设置信息前后台都要用到,所以要把模型方式Ninesky/Models文件夹中,代码如下: ///////////////// ...

  3. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  4. 升级到Windows10

    1.Windows10的优点 2.需要安装的软件 实用软件: Firefox浏览器 Chrome浏览器 有道云笔记 Adobe Reader Adobe Flash Adobe PhotoShop 编 ...

  5. tn文本分析语言(三):高级语法

    标签(空格分隔): 未分类 高级操作 1.脚本表达式 用双引号包含的脚本被称为脚本表达式,目前支持嵌入Python. 脚本表达式只能在顺序表达式中使用.代码可以在三个位置存在: |位置|功能|例子| ...

  6. swift 中单例的写法

    在swift中单例的写法和oc的有所不同,在书写的时候又分很多种写法,,如果一个.swift 文件只创建了一个类,可以用那种dispatch_once的写法,如果一个.swift文件中有很多类的存在, ...

  7. 1Z0-053 争议题目解析154

    1Z0-053 争议题目解析154 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 154.A database is running in ARCHIVELOG mode and ...

  8. hdu FatMouse's Speed 动态规划DP

    动态规划的解决方法是找到动态转移方程. 题目地址:http://acm.hdu.edu.cn/game/entry/problem/show.php?chapterid=3&sectionid ...

  9. solr教程

    转载请注明出处:http://www.cnblogs.com/zhuxiaojie/p/5764680.html 本教程基于solr5.5 前言 至于为什么要用solr5.5,因为最新的6.10,没有 ...

  10. Sql Server函数全解(一)字符串函数

    字符串函数用于对字符和二进制字符进行各种操作 1.ASCII()函数  ASCII(character_expression)函数用于返回字符串表达式中最左侧的ASCII代码值.参数character ...