jquery tab plug-in production implementation code

jquery tab plug-in production implementation code_jquery

WBOY

Release： 2016-05-16 18:24:39

Original

1135 people have browsed it

The basic format of the jquery plug-in:

Copy code The code is as follows:

 
(function($){ 
$.fn.tab = function(options){//The tab after $.fn is the function name of this plug-in. You can modify it according to your own preferences. 
var defaults = { 
//Related attributes Settings 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//Function settings implemented}); 
}; 
})(jQuery); 

I am making a tab plug-in here. I will improve the above code

Copy code The code is as follows:

 
(function($){ 
$.fn.tab = function(options){ 
var defaults = { 
eventname: "click", //Trigger event, click is click, mousemove is mouse movement 
titlekeyid: "tabtitle",//Switching ID 
sedcss: "sed",//CSS when selected 
nosedcss :"nosed" //CSS when not selected 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
var tab=$(this ); 
//Bind event
$(tab).find("li").bind(options.eventname,function(){ 
$("#" options.titlekeyid).find( "li").attr("class", options.nosedcss); 
$(this).attr("class", options.sedcss); 
$("#" options.titlekeyid "info") .find("div").css("display", "none"); 
$("#" $(this).attr("id") "info").css("display", " block"); 
//My JS ability is still limited and I feel that the code is not well written 
}); 
}); 
}; 
})(jQuery); 
 

I think everyone has used some jquery plug-ins. Let me take a look at the code when using the plug-in:
(Code 2)

Copy code The code is as follows:

Combine the above two paragraphs Code for description

Copy code The code is as follows:

 
$("#tabtitle") means you Where to use it? Anyone who knows a little about jquery will know what it means. I won’t introduce it in detail. 
.tab is the function name we defined for this plug-in. Compare it to $.fn.tab in (Code 1) tab in . 
.tab({eventname:"mousemove",sedcss:"sed"}); The eventname and sedcss are the attribute values ​​defined in (code 1) var defaults ={};. If we do not need to change the attribute value, then we use the default attribute value, then the plug-in should be used like this 
 

Finally, attach all the page codes:

Copy code The code is as follows:

tab test

< ;body>