实用简单的jquery插件教程（翻译）

概述：这篇教程将介绍如何创建一个简单的jquery插件，并且允许用户改变一些设置。我用的是我自己的jQuery教程－（Menu with jQuery Animate effect）并把菜单转换成插件。

1、引言

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

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

 

 1);

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

1);

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

 

2、插件结构

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

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

 

 1//为了避免冲突，你需要一个匿名函数来包装你的函数   
 2

 

 

2、带有可选项的插件

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

 1)(jQuery); 

 

3、动态菜单插件

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

     1）、 animatePadding : 给animate 效果设置”padding“值
     2）、 defaultPadding :   给padding设置默认的值            

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

 

 1

 

 

4、完整的源代码

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

  

   

我希望这个教程能让你更容易的理解jQuery插件