如何使用简单的jQuery插件

本篇文章为大家展示了如何使用简单的jQuery插件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

1、jQuery插件

开发jQuery插件是一个高级的话题对于jQuery初学者。这个月，我一直在加强学习jQuery。尽管我学习如何把javascript代码和html文档分开。当我看到我自己的javascipt文件时，我并不满意。它太脏乱，所以我决定更近一步－学习如何开发jQuery插件来整理javascript文件。

这个插件是基于我以前的教程－ Navigation List menu + jQuery Animate Effect Tutorial 。上次，我写编写的脚本都把代码放到 document.ready段落中，就像下面的代码。

1$(document).ready(function() { 2 3$('ul#menu li:even').addClass('even'); 4   5$('ul#menu li a').mouseover(function() { 6   7   $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 }); 8   9}).mouseout(function() {1011   $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });12  13}).click(function() {1415   $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });16});17   18});

但是现在 我想把代码写成类似如下格式：

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

这样的格式看起来更简练，而且这些脚本可以在另一个工程重用。

2、插件结构

jQuery 官方网站在 Plugins/Authoring页面提供了非常详细的说明。 但是我发现它非常难以理解。

不过没关系，为了使编写插件更容易，使用下面的小段用来开发插件将是一个非常好的结构。

1//为了避免冲突，你需要一个匿名函数来包装你的函数    2(function($){    3 4    //给jQuery附加一个新的方法 5   $.fn.extend({     6  7   //这儿就是你要开发插件的名子 8   pluginname: function() {    910 //迭代当前匹配元素集合11  return this.each(function() {   1213 //插入自己的代码  1415  });   16   }   17    });   18  19//传递jQuery参数到函数中，    20//因此我们能使用任何有效的javascipt变量名来替换"$"符号。但是我们将坚持使用 $ (我喜欢美元符号：)21

2、带有可选项的插件

如果你看了***步的介绍,"padding"值对于这个插件是用户配置的。他有利于一些设置，所以用户能改变设置根据他们自己的需要。请确定你为每一个变量指定了默认值。现在，如下的代码：

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 : '#000000',   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、动态菜单插件

现在你学习了插件的结构。紧接着是我基于以前教程的开发的插件。插件它允许4个配置：

1）、 animatePadding : 给animate 效果设置"padding"值

2）、 defaultPadding : 给padding设置默认的值

3）、evenColor :设置偶数行事件的颜色

4）、oddColor : 设置奇数行事件的颜色

1(function($){    2    $.fn.extend({     3   //plugin name - animatemenu    4   animateMenu: function(options) {    5 6  //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}, 300);   32   33 }).mouseout(function() {   34$(this).animate({paddingLeft: o.defaultPadding}, 300);   35 });   36    37  });   38   }   39    });   40})(jQuery);   4142

4、完整的源代码

你可以保存这个插件再一个单独的文件。（例如：jquery.animatemenu.js）.在这个教程中，我把脚本放到html文档中

1

2"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>    8    < 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>   51    < 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>
61 < LI>Home
62 < LI>Posts
63 < LI>About
64 < LI>Contact
65< /LI>< /UL>

上述内容就是如何使用简单的jQuery插件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。