封装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=" ...
随机推荐
- hdu 4858 项目管理(vector模拟)
# include <stdio.h> # include <algorithm> # include <string.h> # include <vecto ...
- [网页游戏开发]进一步了解Morn UI及工作流
Morn UI工作流 Morn Builder不仅仅是对Flash IDE的改进,传统的开发协作是以fla为基础,由于fla是二进制文件,在以svn等版本控制软件协作下,合并过程中会出现各种各样的问题 ...
- WM_GETMINMAXINFO的作用 .
如果想要实现窗口全屏,并且还有状态栏,会出现问题,那就是OnGetMinMaxInfo函数的作用.你可以试一下,如果把这个函数去掉,则当你按下工具栏中的全屏显示按钮时,框架视图确实变大了,但没有想象的 ...
- BZOJ 2115: [Wc2011] Xor DFS + 线性基
2115: [Wc2011] Xor Time Limit: 10 Sec Memory Limit: 259 MB Description Input 第一行包含两个整数N和 M, 表示该无向图中 ...
- 常用SQL备忘录
联表删除: delete t1,t2 from table_name t1 left join t2 on t1.id=t2.id where t1.id=23 (ps:该语句在mysql 5.0之前 ...
- Pattern: API Gateway / Backend for Front-End
http://microservices.io/patterns/apigateway.html Pattern: API Gateway / Backend for Front-End Contex ...
- rails find find_by where
find根据id进行查询,像Product.find(3),查询语句是Product Load (0.1ms) SELECT "products".* FROM "pro ...
- YTU 2457: 很简单的一道题
2457: 很简单的一道题 时间限制: 1 Sec 内存限制: 128 MB 提交: 261 解决: 80 [提交][状态][讨论版] 题目描述 有一个简单的函数数学公式,如下 输入 重复输入多组 ...
- dedecms专题列表页不显示标题的解决办法
在网站专题中的标题都是比较长的,所以在调用title的时候没有使用title而是使用fulltitle的,fulltitle在其他的模型中都是可以正常使用的,也可以调用出字段,但是在专题中就没有调用出 ...
- Adobe 官方公布的 RTMP 规范
原文: http://blog.csdn.net/defonds/article/details/17534903 RTMP 规范中文版 PDF 下载地址 译序:本文是为截至发稿时止最新 Adobe ...