封装jQuery插件实现TAB切换
先上效果图：
直接上代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src='jquery.js'></script>
<script src='tab.js'></script>
<style>
*{margin:0px;padding:0px;background-color: #757575}
.tab{margin-left: 100px;margin-top: 100px;height: 250px;}
.tab .tab-ul{height: 30px;}
.tab .tab-ul .tab-li{float:left;margin-right: 5px;list-style: none; background-color: #323232;color: #fff;display: block;width: 50px;border-radius: 5px 5px 0 0 ;text-align: center;cursor: pointer;}
.tab .tab-ul .active{color: #323232; background-color: #fff;}
.tab .content-warp{width: 200px;height: 200px;background-color: #fff;overflow: hidden;padding:5px;}
.tab .content-warp .content{width: 200px;height: 200px;display: none}
.tab .content-warp .content img{width:100%;height: 100%;}
.tab .content-warp .current{display: block}
</style>
</head>
<body>
<div class="tab" data-config='{
"event":"click",
"time":false,
"type":"default"
}'>
<ul class="tab-ul">
<li class="tab-li active">新闻</li>
<li class="tab-li">热点</li>
<li class="tab-li">军事</li>
<li class="tab-li">社会</li>
</ul>
<ul class="content-warp">
<li class="content current"><img src="img/1.jpg"></li>
<li class="content"><img src="img/2.jpg"></li>
<li class="content"><img src="img/3.jpg"></li>
<li class="content"><img src="img/4.jpg"></li>
</ul>
</div> <div class="tab" data-config='{
"event":"mouseover",
"time":false,
"type":"fade"
}'>
<ul class="tab-ul">
<li class="tab-li active">新闻2</li>
<li class="tab-li">热点2</li>
<li class="tab-li">军事2</li>
<li class="tab-li">社会2</li>
</ul>
<ul class="content-warp">
<li class="content current"><img src="img/1.jpg"></li>
<li class="content"><img src="img/2.jpg"></li>
<li class="content"><img src="img/3.jpg"></li>
<li class="content"><img src="img/4.jpg"></li>
</ul>
</div> <div class="tab" data-config='{
"event":"click",
"time":3000,
"type":"fade"
}'>
<ul class="tab-ul">
<li class="tab-li active">新闻2</li>
<li class="tab-li">热点2</li>
<li class="tab-li">军事2</li>
<li class="tab-li">社会2</li>
</ul>
<ul class="content-warp">
<li class="content current"><img src="img/1.jpg"></li>
<li class="content"><img src="img/2.jpg"></li>
<li class="content"><img src="img/3.jpg"></li>
<li class="content"><img src="img/4.jpg"></li>
</ul>
</div>
<script>
$(".tab").tab();
</script>
</body>
</html>
插件tab.js!function( var Tab = function(ele){
this.ele = ele;
config = JSON.parse(ele.attr('data-config'));
//默认配置
this.config = {
"event":"mouseover",//触发事件
"time":2000,//切换时间 false 为不切换
"invoke":1,//默认tab
"type":"default"//切换方式 默认和淡出
};
$.extend(this.config, config); //默认地址
this.index = this.config.invoke;
//点击事件
this.switch(); //默认显示
this.invoke(); //轮播
this.loopfun();
}; Tab.prototype = {
"switch":function(){
ele = this.ele;
var that = this;
config = this.config;
event = config.event == "click"?"click":"mouseover";
if(config.type == "default"){
ele.find(".tab-li").on(event, function(e, par1){
//par1存在则为模拟请求
$(this).addClass("active").siblings().removeClass("active");//tab
var index = $(this).index();
that.ele.find(".content").eq(index).show().addClass("current").siblings().removeClass("current").hide();
if(that.loop && !par1){
clearInterval(that.loop);
that.loop = null;
}
that.addIndex(index);
}).on('mouseout', function(){
if(!that.loop){
that.loopfun();
}
});
}else{
ele.find(".tab-li").on(event, function(e, par1){
//par1存在则为模拟请求
$(this).addClass("active").siblings().removeClass("active");//tab
var index = $(this).index();
that.ele.find(".content").eq(index).fadeIn().siblings().fadeOut();
if(that.loop && !par1){
clearInterval(that.loop);
}
that.addIndex(index);
}).on('mouseout', function(){
that.loopfun();
});
}
},
"invoke":function(){
ele = this.ele;
config = this.config;
ele.find('.tab-li').eq(config.invoke-1).addClass("active").siblings().removeClass("active");
ele.find('.content').eq(config.invoke-1).addClass("current").siblings().removeClass("current");
},
"addIndex":function(index){
var count = this.ele.find('.tab-li').length;
if(++index>=count){
this.index = 0;
}else{
this.index = index;
}
},
"loopfun":function(){
if(this.config.time && parseInt(this.config.time)){
that = this;
this.loop = setInterval(function(){
event = that.config.event == "click"?"click":"mouseover";
that.ele.find(".tab-li").eq(that.index).trigger(event, ['tri']);
}, that.config.time)
}
}
} //注册成jquery方法
$.fn.extend({
tab:function(){
this.each(function(){
new Tab($(this))
})
return this;
}
})
window.Tab = Tab;
}(jQuery)
标签可随意设置成文本或其他内容，可自行修改。
依自己的理解对切换逻辑进行修改：
1.mousove触发切换时只有mouseout才会继续轮训切换
2.click触发切换时当鼠标在切换页也只有mouseout才会继续轮训切换
代码托管地址：https://github.com/yimijianfang/tab
封装jQuery插件实现TAB切换的更多相关文章
- 自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
- 封装jQuery插件的步骤
引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...
- 封装jquery插件
最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装, 明白了如何封装插件,才能更好修改插件:如何封装插件? 1.插件封装类型 ...
- jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
- jquery时间轴tab切换效果实现结合swiper实现滑动显示效果
需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- Jquery实现横向tab切换
//需求:鼠标放在不同的导航栏上,下面显示的内容自动切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head& ...
- jQuery 练习：tab 切换
实现内容随菜单切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- alsa声卡切换
环境 ubuntu12.04 因为桌面版的默认装了,而且调声音也很方便,这里说一下server版下的配置,毕竟做开发经常还是用server版的 1.安装 apt-get install alsa-ba ...
- Jquery-easyui的默认图标的使用，以及如何添加自己想要的图标
easyui的默认图标有以下这些: .icon-blank{ background:url('icons/blank.gif') no-repeat; } .icon-add{ background: ...
- c#生成PDF准考证
项目中需要做一个生成PDF准考证的功能,在这里跟大家分享一下思路.. 1.首先是下载Adobe Acrobat 9 Pro,安装破解(高版本的貌似破解,不了,自带正版意识的略过..随意下载) 2.新建 ...
- java8--面向对象 上（疯狂java讲义3） 复习笔记
1.初始化块总在构造器执行之前被调用 2.静态初始化块用于初始化类,在类初始化阶段被执行 3.如果继承树里的某个类要被初始化时,系统将会同时初始化该类的所有父类 4.一旦程序员为一个类提供了构造器,系 ...
- sql建表，建索引注意事项
建表注意 .建议字段定义为NOT NULL 搜索引擎 MyISAM InnoDB 区别 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基 ...
- eclipse debug configurations arguments指定文件路径参数
1 eclipse debug configurations arguments指定文件路径参数 使用绝对路径,但是这个文件必须要放在该project的源码路径的外面才行,否则eclipse不认这个文 ...
- Java Management Extensions (JMX) Flume
Lesson: Overview of the JMX Technology (The Java™ Tutorials > Java Management Extensions (JMX)) h ...
- 集群环境搭建-SSH免密码登陆(二)
1.打开sshd配置 命令: vi /etc/ssh/sshd_config 找到以下内容,并去掉注释符”#“ RSAAuthentication yes PubkeyAuthentication y ...
- CodeForces 24D Broken robot（期望+高斯消元）
CodeForces 24D Broken robot 大致题意:你有一个n行m列的矩形板,有一个机器人在开始在第i行第j列,它每一步会随机从可以选择的方案里任选一个(向下走一格,向左走一格,向右走一 ...
- 【翻译自mos文章】即使resource_limit = false， password的 资源限制也会生效
即使resource_limit = false, password的 资源限制也会生效 參考原文: Resource limits for passwords work even with reso ...