html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab插件的封装</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="hbk.js"></script>
<link rel="stylesheet" href="hbk.css">
</head>
<body>
<div class="tab-view">
<p>1、没有配置任何参数</p>
<div class="js-tab tab">
<ul class="tab-nav">
<li class="actived"><a href="javascript:void(0)">明星</a></li>
<li><a href="javascript:void(0)">科技</a></li>
<li><a href="javascript:void(0)">付款</a></li>
<li><a href="javascript:void(0)">电影</a></li>
</ul>
<div class="content-wrap">
<div class="content-item current">明星内容</div>
<div class="content-item">科技内容</div>
<div class="content-item">付款内容</div>
<div class="content-item">电影内容</div>
</div>
</div>
</div>
<div class="tab-view">
<p>2、点击响应切换选项卡，fade方式</p>
<div class="js-tab tab" data-config='
{
"triggerType":"click",
"effect":"fade"
}'>
<ul class="tab-nav">
<li class="actived"><a href="javascript:void(0)">明星</a></li>
<li><a href="javascript:void(0)">科技</a></li>
<li><a href="javascript:void(0)">付款</a></li>
<li><a href="javascript:void(0)">电影</a></li>
</ul>
<div class="content-wrap">
<div class="content-item current">明星内容</div>
<div class="content-item">科技内容</div>
<div class="content-item">付款内容</div>
<div class="content-item">电影内容</div>
</div>
</div>
</div>
<div class="tab-view">
<p>3、默认选择第3个选项卡</p>
<div class="js-tab tab" data-config='
{
"invoke":3
}'>
<ul class="tab-nav">
<li class="actived"><a href="javascript:void(0)">明星</a></li>
<li><a href="javascript:void(0)">科技</a></li>
<li><a href="javascript:void(0)">付款</a></li>
<li><a href="javascript:void(0)">电影</a></li>
</ul>
<div class="content-wrap">
<div class="content-item current">明星内容</div>
<div class="content-item">科技内容</div>
<div class="content-item">付款内容</div>
<div class="content-item">电影内容</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//var tab1 = new Tab($(".js-tab").eq(0));
//Tab.init($(".js-tab"));// 让Tab的初始化交给插件自身
$(".js-tab").tab();//注册为Jquery的方式调用
});
</script>
</body>
</html>css：
*{margin: 0;padding: 0}
body{
padding:100px;background: #323232;font-size: 12px;font-family: "微软雅黑
}
ul,li{
list-style: none;
}
.tab{
width: 300px;
}
.tab .tab-nav{
height: 30px;
}
.tab .tab-nav li{
float: left;
margin-right: 5px;
background-color: #767676;
border-radius: 3px 3px 0 0 ;
}
.tab .tab-nav li a{
color: #fff;
display: block;
height: 30px;
line-height: 30px;
padding: 0 20px;
text-decoration: none;
}
.tab .tab-nav li.actived{
background-color: #fff;
}
.tab .tab-nav li.actived a{
color:#777;
}
.tab .content-wrap{
background-color: #fff;
height: 200px;
padding: 5px;
}
.tab .content-wrap .content-item{
position: absolute;
height: 200px;
display: none;
}
.tab .content-wrap .current{
display: block;
}
.tab-view{
float: left;margin-right: 50px;
}
.tab-view p{
color: #999;
margin-bottom: 20px;
}js:
(function($){
var Tab = function(tab){
var _this_ = this;
// 保存tab
this.tab = tab;
// 默认配置参数
this.config = {
"triggerType":"mouseover",//触发类型
"effect":"default",//加载特效
"invoke":1,// 默认选中选项卡索引
"auto":false// 是否自动轮播
}
this.tabItems = this.tab.find("ul.tab-nav li");// 保存所有的tab选项卡
this.contentItems = this.tab.find("div.content-wrap div.content-item");
if(this.getConfig()){
// 如果配置了，则采用新的，否则以默认值
$.extend(this.config,this.getConfig());
}
var config = this.config;//真正的配置，如果配置了，就是最新的，否则就是默认值
// 从配置中拿到triggerType
var triggerType = config.triggerType;
var invoke = config.invoke;
// 根据触发类型绑定事件
if(triggerType==="click"){
// 当前选中li加上actived
this.tabItems.bind(triggerType,function(){
_this_.invoke($(this));
});
}else if(triggerType==="mouseover"||triggerType!="click"){
// 采用mouseover默认触发
this.tabItems.mouseover(function(){
var self = $(this);
this.timer = window.setTimeout(function(){
_this_.invoke(self);
},300);
}).mouseout(function(){
window.clearTimeout(this.timer);
});
}
// 自动切换逻辑，需要定时器的支撑
if(config.auto){
this.timer = null;
this.loop = 0 ;
this.autoPlay();
// 当鼠标移动到tab上时，清除定时器，移出时加上定时器
this.tab.hover(function(){
window.clearInterval(_this_.timer);
},function(){
_this_.autoPlay();
});
}
// 切换到第几个tab
if(invoke>1){
_this_.invoke(this.tabItems.eq(invoke-1));
}
};
Tab.prototype={
getConfig:function(){
var config = this.tab.attr("data-config");
if(config&&config!=''){
return $.parseJSON(config);
}else{
return null;
}
},
invoke:function(currentTab){
var _this_ = this;
currentTab.addClass("actived").siblings().removeClass("actived");
//对应的content-item 修改成display:block
var index = currentTab.index();
var effect = this.config.effect;
var contentItems = this.contentItems;
if(effect==='default'||effect!='fade'){
contentItems.eq(index).addClass("current").siblings().removeClass("current");
}else if(effect==='fade'){
contentItems.eq(index).fadeIn().siblings().fadeOut();
}
// 对自动轮播同步index
if(this.config.auto){
this.loop = index;
}
},
autoPlay:function(){
var _this_ = this;
var tabItems = this.tabItems;
var tabLength = tabItems.size();
var config = this.config;
this.timer = window.setInterval(function(){
_this_.loop ++;
if(_this_.loop>=tabLength){
_this_.loop = 0;
}
//tabItems.eq(_this_.loop).trigger(config.triggerType);
_this_.invoke(tabItems.eq(_this_.loop));
},config.auto);
}
}
// 页面的初始化函数
Tab.init = function(tabs){
var _this_ = this;
tabs.each(function(){
new _this_($(this));
});
}
$.fn.extend({
tab:function(){
this.each(function(){
new Tab($(this));
});
return this;//使Jquery支持链式调用
}
});
window.Tab = Tab;// 注册到window对象中
})(jQuery)页面效果：
在慕课网学习，自己手把手敲了一遍，学到了不少知识，虽然看似一个小功能，里面涉及到的知识点还挺多的，手记一番，方便日后查阅。