After practice, I found that I am not a persistent person, so as soon as there is a plan to implement, in order to keep learning, knocking code every day, so constantly watching video tutorials, reading books, that year became a learning slag is because we can not repeat reading a book. In order to share the burden of the family, good books and video tutorials are repeated. Tolerance is over. I need to improve!

Today, I saw the tab tab tab of Mucho. After reading it, I found it a little simple, but it is worth learning to save the value by using data - * attribute. So, I decided to draw one by myself.

As for plug-ins, as mentioned in the previous article, this point should be clearly distinguished and emphasized again. Inside the plug-in, it points to the current plug-in object; if there are internal functions in the plug-in, such as timers, events point to DOM elements. If you don't remember, it doesn't matter. You can output the current one in the browser console at a glance.

About the preliminary development of tab tab plug-in of jQuery plug-in, there is no plug-in extension, no prevention of global variable name conflict, of course, there is no automatic initialization, just a simple exercise.

Firstly, the structure label code is added. Because the class name parameter is not processed, the name is temporarily fixed.

<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>

// This plug-in is trained according to the tutorial of tab plug-in in Mucho.com.
+(function($){
	'use strict';//Strict model
	// Class tab
	var Tab=function(tab){
		this.tab=tab;
		var _this=this; //Save the current object Tab
		this.timer=null;
        this.loop=0;
		// Default configuration parameters
		this.config={
			type:"mouseover",
            effect:"default",
            show:1,
            auto:false
		};
		this.getConfig()&&$.fn.extend(this.config,this.getConfig());
		//Save plug-in objects and configuration parameters
		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){
            	//In the middle of the bind function, this points to the DOM element, so use _this
                _this.currentChange($(this));
            });
        }else{
            this.tabNav.bind("mouseover",function(e){
                _this.currentChange($(this));
            });
        }
        //Automatic switching
        if(this.config.auto){
            this.autoPlay(this);
            this.tab.hover(function(){
                clearInterval(_this.timer);//Mouse clearance automatically
            },function(){
                _this.autoPlay(_this);
            });
        }
	}
	// prototype
	Tab.prototype={
		// Get configuration parameters
		getConfig:function(){
			var config=this.tab.attr('data-config');//Get element configuration parameters
			//Escape the config string as an object
			if(config&&config!=null){return $.parseJSON(config)}
			else{
				return null;
			}
		},
		//Tab toggle,
		currentChange:function(cur){
			var index=cur.index();//Get the index value of the current li
            cur.addClass("active").siblings().removeClass("active");
            if(this.config.effect==="default"){
                this.tabItem.eq(index).addClass("active").siblings().removeClass("active");//Adding active to the current element removes active from sibling elements
            }else if(this.config.effect==="fade"){
                this.tabItem.eq(index).stop().fadeIn().siblings().stop().fadeOut();
            }
            if(this.config.auto){
                this.loop=index;
            }
		},
		//Automatic switching
        autoPlay:function(_this){
            var tabLength=this.tabItem.size();//Number of tab loops
            this.timer=setInterval(function(){
                _this.loop++;
                if(_this.loop>=tabLength){
                    _this.loop=0;
                }
                _this.currentChange(_this.tabNav.eq(_this.loop));//Input li, automatic switching
            },this.config.auto);
        }
	}

	// Extend parameters to jQuery methods to implement chain calls, such as $('xx').Tab().css()
	$.fn.extend({
		Tab:function(){
			this.each(function(){
                new Tab($(this));
            });
            return this; //jQuery Chain Call
		}
	});
	// Register global variables
	window.Tab=Tab;
})(jQuery);