Jquery Plugin Beginner Learning

Reference article: Plug-in development boutique tutorial, let your jquery ascend a step

Just learned a bit of jquery plug-in development, write a demo record, practice a bit. After all, the output is the best learning .

This is only the most basic of a plug-in writing, but I think when learning something, learning some foundation, in the later use, then go according to the actual situation of the special research, improve their ability. This is only a personal learning method, there is a better welcome to recommend Ha.

So, the following this jquery plug-in writing, really is the basis to no ... (*^__^*)

CSS section:

#my_alert {line-height:100px; color: #fff; background: #333; text-align:center; font-size:20px;}

JS section:

jquery Plugin Development Demo (function ($) {///basic configuration var DFT = {     WD: "200px",//Wide     hei: "100px",//High     cont: "Success",//Content time     : 200//time};  Entry method function My_alert (options) {     This.ops = $.extend ({},dft,options| | {});     This.vis= "v2.0.0";     This.init (); }  my_alert.prototype={     init:function () {         var ops=this.ops;         var box = $ (' <div id= "My_alert" > "). css ({" width ": ops.wd," height ":" 100px "," position ":" Fixed "," left ":" 50% "," top ":" 50% "}). html (Ops.cont). AppendTo ($ (" body "));       Box.css ({"Margin-left":-(box.outerwidth (True)/2), "Margin-top":-box.outerheight (True)/2});       SetTimeout (function () {           box.remove ();       },ops.time);}     };  $.fn.my_alert = function (options) {     return new My_alert (options);}}) (jQuery);  $ ("Body"). My_alert ({"cont": "Sleeping yarn, Up hi", "Time": 2000});

Through this jquery basic plug-in learning, also summarize it. The development of jquery plug-ins is mainly to add a new method to the method set of jquery's FN by adding the anonymous function to it, and set some properties that can be configured later in the plugin, commonly known as API, and then return your own method. A chained invocation used in conjunction with jquery.

Beginners plug-in development, to their own learning is also a record ... Lifelong learning, progress at 1.1 points. Fighting ...

Jquery Plugin Beginner Learning