How to use a simple jQuery plug-in

This article shows you how to use the simple jQuery plug-in, the content is concise and easy to understand, can definitely make your eyes bright, through the detailed introduction of this article hope you can learn something.

1. JQuery plug-in

Developing jQuery plug-ins is an advanced topic for jQuery beginners. This month, I have been strengthening my study of jQuery. Although I learned how to separate javascript code from html documents. When I saw my own javascipt file, I was not satisfied. It was too messy, so I decided to go one step further-learning how to develop jQuery plug-ins to organize javascript files.

This plug-in is based on my previous tutorial-Navigation List menu + jQuery Animate Effect Tutorial. Last time, all the scripts I wrote put the code in the document.ready section, like the following code.

1 $(document) .ready (function () {23 $('ul#menu li:even'). AddClass (' even'); 4 $('ul#menu li a') .mouseover (function () {67 $(this). Animate ({paddingLeft: "20px"}, {queue:false, duration:500}); 8 9}) .mouseout (function () {1011 $(this). Animate ({paddingLeft: "0"}, {queue:true, duration:500})) ) .click (function () {1415 $(this) .animate ({fontSize: "20px"}, {queue:false, duration:500}); 16}); 17 18})

But now I want to write the code in a format similar to the following:

1 $(document) .ready (function () {2 3 $(# menu) .animateMenu ({4 padding:20 5}) 67})

This format looks more concise, and these scripts can be reused in another project.

2. Plug-in structure

The official jQuery website provides very detailed instructions on the Plugins/Authoring page. But I find it very difficult to understand.

It doesn't matter, however, to make it easier to write plug-ins, using the following section to develop plug-ins would be a very good structure.

In order to avoid conflict You need an anonymous function to wrap your function 2 (function ($) {3 4 / / attach a new method 5 $.fn.extend to jQuery ({67 / / here is the name of your plug-in 8 pluginname: function () {910 / iterate the current set of matching elements 11 return this.each (function () {1213 / / insert your own code 1415})) 16} 17}); 18 19 jQuery / pass the javascipt parameter to the function, 20 shock / so we can replace the "$" symbol with any valid javascipt variable name. But we will insist on using $(I like the dollar sign:) 21

2. With optional plug-ins

If you read the introduction of the * step, the "padding" value is user-configured for this plug-in. It is good for some settings, so users can change settings according to their own needs. Make sure you specify a default value for each variable. Now, the code looks like this:

1 (function ($) {2 3 $.fn.extend ({4 5 / / pass the options variable to the function 6 pluginname: function (options) {7 8 9 / / Set the default values, use comma to separate the settings, example: 10 var defaults = {11 padding: 20, 12 mouseOverColor:'# 0000000, 13 mouseOutColor:'# ffffff' 14} 15 16 var options = $.extend (defaults, options) 1718 return this.each (function () {19 var o = options; 20 21 / / code to be inserted here 22 / / you can access the value like this 23 alert (o.padding); 2425}); 26} 27}); 28 29}) (jQuery)

3. Dynamic menu plug-in

Now you have learned the structure of the plug-in. This is followed by my plug-ins based on previous tutorials. The plug-in allows 4 configurations:

1), animatePadding: set the "padding" value for the animate effect

2), defaultPadding: set the default value for padding

3), evenColor: sets the color of even-numbered line events

4), oddColor: sets the color of odd line events

1 (function ($) {2 $.fn.extend ({3 / / plugin name-animatemenu 4 animateMenu: function (options) {56 / / Settings list and the default values 7 var defaults = {8 animatePadding: 60, 9 defaultPadding: 10,10 evenColor:'# ccc', 11 oddColor:'# eee' 12}; 1314 var options = $.extend (defaults, options); 15 16 return this.each (function () {17 var o = options) 18 19 / / Assign current element to variable, in this case is UL element 20 var obj = $(this); 21 22 / / Get all LI in the UL 23 var items = $("li", obj); 24 25 / / Change the color according to odd and even rows 26 $("li:even", obj) .css ('background-color', o.evenColor); 27 $("li:odd", obj) .css (' background-color', o.oddColor) 28 29 / / Attach mouseover and mouseout event to the LI30 items.mouseover (function () {31 $(this). Animate ({paddingLeft: o.animatePadding}, 32 33}) .mouseout (function () {34 $(this). Animate ({paddingLeft: o.defaultPadding}, 300); 35}); 36 37}); 38} 39}); 40}) (jQuery); 4142

4. Complete source code

You can save the plug-in in a separate file. (for example, jquery.animatemenu.js). In this tutorial, I put the script in the html document

12 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3

< HTML lang=en xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

4 5

< HEAD>

6 7

< SCRIPT type=text/javascript src=" http://code.jquery.com/jquery-latest.js">

< /SCRIPT>

eight

< SCRIPT>

910 (function ($) {11 $.fn.extend ({12 / / plugin name-animatemenu 13 animateMenu: function (options) {1415 var defaults = {16 animatePadding: 60, 17 defaultPadding: 10,18 evenColor:'# ccc', 19 oddColor:'# eee', 20}; 2122 var options = $.extend (defaults, options); 23 24 return this.each (function () {25 var o = options; 26 var obj = $(this)) 27 var items = $("li", obj); 28 29 $("li:even", obj) .css ('background-color', o.evenColor); 30 $("li:odd", obj) .css (' background-color', o.oddColor); 31 32 items.mouseover (function () {33 $(this) .animate ({paddingLeft: o.animatePadding}, 300) 34 35}) .mouseout (function () {36 $(this). Animate ({paddingLeft: o.defaultPadding}, 300); 37 38}); 39}); 40} 41}); 42}) (jQuery); 43 44

< /SCRIPT>

45 46

< SCRIPT type=text/javascript>

47 $(document) .ready (function () {48 $('# menu') .animateMenu ({animatePadding: 30, defaultPadding:10}); 49}); 50

< /SCRIPT>

fifty-one

< STYLE>

52 body {} {font-family:arial;font-style:bold} 53 a {} {color:#666; text-decoration:none} 54 # menu {} {list-style:none;width:160px;padding-left:10px;} 55 # menu li {} {margin:0;padding:5px;cursor:hand;cursor:pointer} 56

< /STYLE>

57 58 5960

< UL id=menu>

sixty-one

< LI>

Home

sixty-two

< LI>

Posts

sixty-three

< LI>

About

sixty-four

< LI>

Contact

sixty-five

< /LI>

< /UL>

The above is how to use the simple jQuery plug-in, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.