前段时间有试着搭建个后台主题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. jQuery对象与DOM对象之间的转换方法

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  2. 编译opengl编程指南第八版示例代码通过

    最近在编译opengl编程指南第八版的示例代码,如下 #include <iostream> #include "vgl.h" #include "LoadS ...

  3. JAVA基础代码分享--DVD管理

    问题描述 为某音像店开发一个迷你DVD管理器,最多可存6张DVD,实现碟片的管理. 管理器具备的功能主要有: 1.查看DVD信息. 菜单选择查看功能,展示DVD的信息. 2.新增DVD信息 选择新增功 ...

  4. 《ASP.NET MVC 5框架揭秘》样章发布

    今天算是新作<ASP.NET MVC 5框架揭秘>正式上架销售的日子(目前本书在互动网已经到货),为了让更多适合的朋友们能够阅读此书,同时也避免让不适合的读者误买此书,特将此书的样章发布出 ...

  5. Oracle_多表查询

    SQL多表查询 等值和不等值连接查询 从多个表中获取数据:如果在查询的时候,直接从多个表中获取数据.没有添加条件判断,会出现"笛卡尔积"错误 笛卡尔积错误 笛卡尔集会在下面条件下产 ...

  6. Openfire/XMPP学习之——Openfire的安装、配置

    一.Openfire下载: 官方下载:http://www.igniterealtime.org/downloads/index.jsp 在官方下载站点,可以获取Windows.Linux.Mac三种 ...

  7. jQuery的事件模型

    前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...

  8. 韩顺平_linux_随堂笔记

    这还是自己3年前(2011年)整理的笔记,记得当时那会儿自己对Linux还特别的憧憬,也很喜欢韩老师的讲课风格,边看边做笔记乐此不彼,现在开通了技术博客,所以把当年的笔记也放上来和大家分享.同时推荐没 ...

  9. TSQL查询45道题

    一.设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher). 四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1- ...

  10. 8.Struts2类型转换器

    类型转换器1.引入在Struts2中,请求参数类型不仅可以是String,还可以是其它类型.如,定义一个请求参数birthday为Date类型,给其赋值为1949-10-1,则birthday接收到的 ...