Learn to write Jquery plug in examples in 10 minutes

  • 2020-03-30 03:53:23
  • OfStack

There are many friends have used jquery plug-in, but few people have written their own jquery plug-in, this article is a simple description of the implementation of jquery plug-in in the form of examples. Share with you for your reference. Specific methods are as follows:
 
In particular, it is the encapsulation of some common, practical, and general functions. Simply put, it is the code in a method, can achieve the effect of reuse, so that you do not need to use this function every time to write again.
 
Now Jquery has added the concept of a plug-in, just write it in its specific format as if it were a function. Believe it or not, I do.
 
I'm going to explain it in simple code, but if you can't write a plug-in, I'm going to be speechless

The specific steps are as follows:

Step 1: define the plug-in


$(function() { 
  $.fn. The plug-in name  = function(options) { 
   var defaults = { 
     Event : "click",    //Trigger response event
     msg : "Holle word!"    //According to the content
   }; 
   var options = $.extend(defaults,options); 
   var $this = $(this);    //Of course, respond to the event object
   //Functional code section
   //The binding event
   $this.live(options.Event,function(e){ 
     alert(options.msg); 
   }); 
  } 
}); 
 

Step 2: invoke the plug-in


$(function() { 
  //Binding element events
  $("#test"). The plug-in name ({ 
   Event : "click",    //Trigger response event
   msg : " Plugins are that simple !"   //According to the content
  }); 
}); 
 

At this point, the simplest plug-in is done! Less than 10 minutes! I believe you should all understand it! JQuery plugins are as simple as that.


Related articles: