PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

实用简单的jQuery插件教程

实用简单的jQuery插件教程

来源:互联网  作者:  发布时间:2010-08-23
1、jQuery插件教程引言 开发jQuery插件是一个高级的话题对于jQu

1、jQuery插件教程引言

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

这个插件是基于我以前的教程- Navigation List menu + jQuery Animate Effect Tutorial 。上次,我写编写的脚本都把代码放到 document.ready段落中,就像下面的代码。
$(document).ready(function() {
$('ul#menu li:even').addClass('even');
$('ul#menu li a').mouseover(function() {
$(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 });
).mouseout(function() {
$(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });
}).click(function() {
$(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });
});
});
但是现在 我想把代码写成类似如下格式:

$(document).ready(function() {
$(#menu).animateMenu({
 padding:20
})
});
这样的格式看起来更简练,而且这些脚本可以在另一个工程重用。

2、插件结构

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

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

//为了避免冲突,你需要一个匿名函数来包装你的函数
(function($){
//给jQuery附加一个新的方法
$.fn.extend({
//这儿就是你要开发插件的名子
pluginname: function() {
//迭代当前匹配元素集合
return this.each(function() {
//插入自己的代码
});
 }
});
//传递jQuery参数到函数中,
//因此我们能使用任何有效的javascipt变量名来替换“$“符号。
但是我们将坚持使用 $ (我喜欢美元符号:)
2、带有可选项的插件

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

function($){ $.fn.extend({
//pass the options variable to the function
pluginname: function(options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
 padding: 20,
 mouseOverColor : '#000000',
mouseOutColor : '#ffffff'
}
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
//code to be inserted here
//you can access the value like this
 alert(o.padding);
});
}
});
})
(jQuery);
3、动态菜单插件

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

1)、 animatePadding : 给animate 效果设置”padding“值

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

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

4)、oddColor : 设置奇数行事件的颜色
(function($){
$.fn.extend({
//plugin name - animatemenu
animateMenu: function(options) {
//Settings list and the default values
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee'
};
var options = $.extend(defaults, options);
return this.each(function() {
var o =options;
//Assign current element to variable, in this case is UL element
var obj = $(this);
 //Get all LI in the UL
var items = $("li", obj);
//Change the color according to odd and even rows
 $("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor);
//Attach mouseover and mouseout event to the LI
items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300);
}).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300);


});
});
}
});
})(jQuery);
4、完整的源代码

你可以保存这个插件再一个单独的文件。(例如:jquery.animatemenu.js).在这个教程中,我把脚本放到html文档中
<"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< HTML lang=en xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
< HEAD>
< SCRIPT type=text/javascript src=" http://code.jquery.com/jquery-latest.js">< /SCRIPT>
< SCRIPT>
(function($){
$.fn.extend({
//plugin name - animatemenu
animateMenu: function(options) {
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee',
};
var options = $.extend(defaults, options);
return this.each(function() {
var o =options;
var obj = $(this);
var items = $("li", obj);
 $("li:even", obj).css('background-color', o.evenColor);
 $("li:odd", obj).css('background-color', o.oddColor);
items.mouseover(function() {
 $(this).animate({paddingLeft: o.animatePadding}, 300);
 }).mouseout(function() {
 $(this).animate({paddingLeft: o.defaultPadding}, 300);
});
});
 }
 });
})(jQuery);
< /SCRIPT>
 < SCRIPT type=text/javascript>
$(document).ready(function() {
 $('#menu').animateMenu({animatePadding: 30, defaultPadding:10});
});
< /SCRIPT>
< STYLE>
body {}{font-family:arial;font-style:bold}
a {}{color:#666; text-decoration:none}
 #menu {}{list-style:none;width:160px;padding-left:10px;}
#menu li {}{margin:0;padding:5px;cursor:hand;cursor:pointer}
< /STYLE>  
< UL id=menu>  
< LI>Home </li>
< LI>Posts </li>
< LI>About   </li>
< LI>Contact   </li>
< /LI>< /UL>

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


延伸阅读:
什么是jquery
jQuery简单应用
JQuery 常用方法基础教程
3K大小的万能JQuery弹出层类库
推荐10个jquery动画菜单 十分漂亮的插件
二十个超级酷和最实用的jQuery实例
jQuery 表格插件汇总
jQuery+CSS图片展示特效
jQuery图片切换效果插件
jQuery网页内容切换效果插件

21个演示展示强大的jQuery特效
jQuery中10个遍历函数
15个最佳jQuery幻灯插件和教程
jQuery+CSS实现多级下拉菜单
7个jquery手风琴效果推荐
你应该学习jQuery的七大理由
Tags: jQuery   插件   教程  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号