jQuery插件开发-----tab选项卡

经过实践，发现我不是一个能够坚持的人，所以一有计划马上执行，为了每天保持学习，敲代码，所以不断看视频教程，看书，当年成为学渣就是因为不能重复看一本书。为了分担家里负担，好书重复翻看，好的视频教程重复看，忍忍也就过去了，我需要提升！

关于插件，之前文章讲过，this指向要分清楚，再次强调一下。若在插件内部，则指向当前插件对象；若插件中还有内部函数，例如计时器，事件则指向DOM元素。如果记不住，没关系，你可以在浏览器控制台中输出当前this，一目了然。

关于jQuery插件之tab选项卡插件初步开发，里面并没有做插件扩展，也没有做防止全局变量名冲突，当然也没有自动初始化，只是简单的练习。

首先上结构标签代码，由于没有做类名参数处理，暂时固定名字。

<div id="tab" class="js-tab" data-config='{
"type":"mouseover",
            "effect":"fade",
            "show":1,
            "auto":1000}'>
    <ul class="tab-nav">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul class="tab-wrap">
        <li class="tab-item active"></li>
        <li class="tab-item"></li>
        <li class="tab-item"></li>
    </ul>
</div>

接下来tab插件代码

// 该插件根据慕课网tab插件教程练手
+(function($){
'use strict';//严格模式
// tab类
var Tab=function(tab){
this.tab=tab;
var _this=this; //保存当前对象Tab
this.timer=null;
        this.loop=0;
// 默认配置参数
this.config={
type:"mouseover",
            effect:"default",
            show:1,
            auto:false
};
this.getConfig()&&$.fn.extend(this.config,this.getConfig());
//保存插件对象及配置参数
this.tabNav=this.tab.find('.tab-nav li');
this.tabItem=this.tab.find('.tab-wrap .tab-item');
 if(this.config.type==="click"){
            this.tabNav.bind(this.config.type,function(e){
            //bind函数中间，this指向就是DOM元素，所以就用_this
                _this.currentChange($(this));
            });
        }else{
            this.tabNav.bind("mouseover",function(e){
                _this.currentChange($(this));
            });
        }
        //自动切换
        if(this.config.auto){
            this.autoPlay(this);
            this.tab.hover(function(){
                clearInterval(_this.timer);//鼠标经过清除自动
            },function(){
                _this.autoPlay(_this);
            });
        }
}
// 原型
Tab.prototype={
// 获取配置参数
getConfig:function(){
var config=this.tab.attr('data-config');//获取元素配置参数
//转义config字符串为对象
if(config&&config!=null){return $.parseJSON(config)}
else{
return null;
}
},
//选项卡切换，
currentChange:function(cur){
var index=cur.index();//获取当前li的索引值
            cur.addClass("active").siblings().removeClass("active");
            if(this.config.effect==="default"){
                this.tabItem.eq(index).addClass("active").siblings().removeClass("active");//为当前元素添加active，移除兄弟元素的active
            }else if(this.config.effect==="fade"){
                this.tabItem.eq(index).stop().fadeIn().siblings().stop().fadeOut();
            }
            if(this.config.auto){
                this.loop=index;
            }
},
//自动切换
        autoPlay:function(_this){
            var tabLength=this.tabItem.size();//tab循环个数
            this.timer=setInterval(function(){
                _this.loop++;
                if(_this.loop>=tabLength){
                    _this.loop=0;
                }
                _this.currentChange(_this.tabNav.eq(_this.loop));//传入li，进行自动切换
            },this.config.auto);
        }
}

// 扩展参数到jQuery方法上,实现链式调用，如$('xx').Tab().css()
$.fn.extend({
Tab:function(){
this.each(function(){
                new Tab($(this));
            });
            return this; //jQuery链式调用
}
});
// 注册全局变量
window.Tab=Tab;
})(jQuery);

最后上完整代码