jquery Plug-in Learning (v) _jquery

This section encapsulates Plug-ins, what's the progress?

The general external release of Plug-ins should be packaged, packaged plug-ins should also be in line with the specification, only such a written plug-in to have a promotional value, and other users love.

The first step is to define a separate field, as shown in the following code.

Copy Code code as follows:

(function ($) {
Custom Plug-in Code
}) (JQuery)//Encapsulation Plugin

To determine the type of plug-in to create, choose how to create it, for example, to create a plug-in that sets the element font color, you should create a JQuery object method that is more canonical when you consider that jquery provides a plug-in extension method extend ().

Copy Code code as follows:

(function ($) {
Custom Plug-in Code
$.extend ($.fn,{//jquery Object extension method

})
}) (JQuery)//Encapsulation Plugin

Generic Plug-ins will accept parameters to control the behavior of Plug-ins, for example, for color-setting plug-ins, you should allow the user to set the font color, and should be considered if the user does not set the color, you should leave the default color to set.

Copy Code code as follows:

(function ($) {
Custom Plug-in Code
$.extend ($.fn,{
Color:function (options) {
var options = $.extend ({bcolor: "White", Fcolor: "Black"},options);
//
}
})
}) (JQuery)//Encapsulation Plugin

Finally improve the plugin

Copy Code code as follows:

;(function ($) {
$.extend ($.fn,{
Color:function (Options) {var options = $.extend ({bcolor: "White", Fcolor: "Black"},options);
function body
Return This.each (function () {
$ (this). CSS ("color", options.bcolor);
$ (this). CSS ("background", options.fcolor);
});
}//color==end
})
}) (JQuery);

Call to see

Copy Code code as follows:

$ ("H1"). Color ({bcolor: "#ccc", Fcolor: "#eee"});
$ (' a '). Color ("#fff");