DOM note (7): Develop the JQuery plug-in, domjquery

DOM note (7): Develop the JQuery plug-in, domjquery

In the previous notebook, I explained how to use jQuery to expand global functions and objects: DOM notes (6): How to Implement JQuery extension?

In this notebook, a simple animation plug-in named example-plugin will be developed to implement a simple function: move the cursor to the target tag, move the tag, and change the background color; when the cursor leaves, the label restores the original style.

Because it is an extension of jQuery objects, jQuery. fn. extend () is used for extension. The plug-in name is dwqs and closure is used:

/** Example plug-in function: * move the cursor to the target tag, move the tag, and change the background color. When the cursor leaves, the tag will restore the original style */(function ($) {// $. fn. extend () for object extension $. fn. extend ({// plug-in function implementation dwqs: function (options) {// subject}) ;}( jQuery );

 

Define default parameters for the plug-in and use $. extend () extension:

// Set the default value var defaults = {padding: 20 for the plug-in parameter, // The moving distance from time: 300, // The moving time color: "red" // the background color }; // use $. extend () overwrites the default value var options =$. extend (defaults, options );

 

Add function code

// Convert the DOM element referenced by this into the JQuery object var obj =$ (this); // Add the animated obj when the mouse passes. mouseover (function () {obj. animate ({paddingLeft: options. padding}, options. time); obj.css ("backgroundColor", options. color) ;}); // restore obj when the mouse leaves. mouseout (function () {obj. animate ({paddingLeft: 0}, options. time); obj.css ("backgroundColor ","");});

 

The plug-in's file name is saved as a example-plugin.js, the complete code is as follows:

/** Example plug-in function: * move the cursor to the target tag, move the tag, and change the background color. When the cursor leaves, the tag will restore the original style */(function ($) {// $. fn. extend () for object extension $. fn. extend ({// plug-in function implementation dwqs: function (options) {// set the default value for the plug-in parameter var defaults = {padding: 20, // move the distance from time: 300, // move time color: "red" // background color}; // use $. extend () overwrites the default value var options =$. extend (defaults, options); return this. each (function () {// convert the DOM element referenced by this into the JQuery object var obj =$ (this); // Add the animation obj when the mouse passes. mouseover (function () {obj. animate ({paddingLeft: options. padding}, options. time); obj.css ("backgroundColor", options. color) ;}); // restore obj when the mouse leaves. mouseout (function () {obj. animate ({paddingLeft: 0}, options. time); obj.css ("backgroundColor", "") ;}) ;}/// do not have a; number; otherwise an error occurs}) ;}( jQuery );

 

Test plug-in:

 

<! DOCTYPE html> 
 
Effect Demo: http://jqplugin.sinaapp.com/test.html
Code download: http://download.csdn.net/detail/u011043843/8235387
First: http://www.ido321.com/1333.html