How jquery customizes the use of plugin--$.fn

jquery provides a lot of plug-ins, a cursory search, found that there is not a lot to describe:

Point a few look, found are quite beautiful, web development needs more is the aesthetic, not JS, can only say that JS is just a foundation bar.

It's a developer's gospel. However, so many plug-ins do not always meet our needs, for example, sometimes we just need a ship's engine, now we have only ships, we also need to take apart the ship, or sometimes we need the parts at all, we need to do it ourselves.

For example, I've written a tab control before, and now I'm going to make it a plugin, let's take a look at this little demo:

First, write a separate JS file:

JavaScript document<span style= "color: #FF0000;" ><strong>//$.fn is the method of extension </strong></span> (function ($) {   ///form a closure, scoping the scope to    $. Fn.miaovtab=function () {var this=this;$ (this). Find (' input '). Click (function () {$ (this). Find (' input '). attr (' class ', "); $ (this). Find (' div '). FadeOut (); $ (this). attr (' class ', ' active '); $ (this). Find (' div '). EQ ($ (this). Index ()). FadeIn ();});}       ) (JQuery);

Then, we add the following code to the page:

     

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


When we look in the browser, you can click on 3 buttons to make the tab switch effect.



 
 

  
  
 
   
 
 
  
 
 


Now , to practice the production of plug-ins, the next time you encounter an inappropriate plug-in, we can hand-write or part of the source code from the demo, and then use these to make their own lightweight plug-in. 


PS: Attach a very beautiful jquery plugin library: http://www.jq22.com/






           
How jquery customizes the use of plugin--$.fn