Shulou(Shulou.com)06/02 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.