实用简单的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段落中,就像下面的代码。
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() {
10
11 $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });
12
13}).click(function() {
14
15 $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });
16});
17
18});
但是现在 我想把代码写成类似如下格式:
2
3 $(#menu).animateMenu({
4 padding:20
5 })
6
7});
这样的格式看起来更简练,而且这些脚本可以在另一个工程重用。
2、插件结构
jQuery 官方网站在 Plugins/Authoring页面提供了非常详细的说明。 但是我发现它非常难以理解。
不过没关系,为了使编写插件更容易,使用下面的小段用来开发插件将是一个非常好的结构。
2(function($){
3
4 //给jQuery附加一个新的方法
5 $.fn.extend({
6
7 //这儿就是你要开发插件的名子
8 pluginname: function() {
9
10 //迭代当前匹配元素集合
11 return this.each(function() {
12
13 //插入自己的代码
14
15 });
16 }
17 });
18
19//传递jQuery参数到函数中,
20//因此我们能使用任何有效的javascipt变量名来替换“$“符号。但是我们将坚持使用 $ (我喜欢美元符号:)
21
2、带有可选项的插件
如果你看了第一步的介绍,"padding"值对于这个插件是用户配置的。他有利于一些设置,所以用户能改变设置根据他们自己的需要。请确定你为每一个变量指定了默认值。现在,如下的代码:
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);
17
18 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);
24
25 });
26 }
27 });
28
29})(jQuery);
3、动态菜单插件
现在你学习了插件的结构。紧接着是我基于以前教程的开发的插件。插件它允许4个配置:
1)、 animatePadding : 给animate 效果设置”padding“值
2)、 defaultPadding : 给padding设置默认的值
3)、evenColor :设置偶数行事件的颜色
4)、oddColor : 设置奇数行事件的颜色
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 };
13
14 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 LI
30 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);
41
42
4、完整的源代码
你可以保存这个插件再一个单独的文件。(例如:jquery.animatemenu.js).在这个教程中,我把脚本放到html文档中
我希望这个教程能让你更容易的理解jQuery插件