实用简单的jQuery插件教程
51CTO推荐专题: 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 $(#menu).animateMenu({ 4 padding:20 5 }) 6 7}); |
这样的格式看起来更简练,而且这些脚本可以在另一个工程重用。
2、插件结构
jQuery 官方网站在 Plugins/Authoring页面提供了非常详细的说明。 但是我发现它非常难以理解。
不过没关系,为了使编写插件更容易,使用下面的小段用来开发插件将是一个非常好的结构。
2、带有可选项的插件
如果你看了第一步的介绍,"padding"值对于这个插件是用户配置的。他有利于一些设置,所以用户能改变设置根据他们自己的需要。请确定你为每一个变量指定了默认值。现在,如下的代码:
3、动态菜单插件
现在你学习了插件的结构。紧接着是我基于以前教程的开发的插件。插件它允许4个配置:
1)、 animatePadding : 给animate 效果设置”padding“值
2)、 defaultPadding : 给padding设置默认的值
3)、evenColor :设置偶数行事件的颜色
4)、oddColor : 设置奇数行事件的颜色
4、完整的源代码
你可以保存这个插件再一个单独的文件。(例如:jquery.animatemenu.js).在这个教程中,我把脚本放到html文档中