在上一篇笔记本中，讲解了如何利用jQuery扩展全局函数和对象：DOM笔记（六）：怎么进行JQuery扩展？
在这篇笔记本中，将开发一个简单的动画插件，名称是example-plugin，用其实现一个简单的功能：光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式。
因为是jQuery对象的扩展，采用jQuery.fn.extend()进行扩展，插件名是dwqs,并且使用闭包：
/*
*示例插件功能：
*光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式
*/
(function($)
{
// $.fn.extend()进行对象扩展
$.fn.extend({
// 插件功能实现
dwqs:function(options)
{
//主体
}
});
})(jQuery);
为插件定义默认参数，并用$.extend()扩展：
// 为插件参数设定默认值
var defaults =
{
padding:20, //移动距离
time:300, //移动时间
color:"red" //背景颜色
};
// 使用$.extend()覆盖插件中的默认值
var options = $.extend(defaults,options);
添加功能代码
// 将this引用的DOM元素转为JQuery对象
var obj = $(this);
// 鼠标经过时添加动画
obj.mouseover(function()
{
obj.animate({paddingLeft:options.padding},options.time);
obj.css("backgroundColor",options.color);
});
// 鼠标离开时恢复
obj.mouseout(function()
{
obj.animate({paddingLeft:0},options.time);
obj.css("backgroundColor","");
});
插件的文件名命名为example-plugin.js保存，完整代码如下：
/*
*示例插件功能：
*光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式
*/
(function($)
{
// $.fn.extend()进行对象扩展
$.fn.extend({
// 插件功能实现
dwqs:function(options)
{
// 为插件参数设定默认值
var defaults =
{
padding:20, //移动距离
time:300, //移动时间
color:"red" //背景颜色
};
// 使用$.extend()覆盖插件中的默认值
var options = $.extend(defaults,options);
return this.each(function()
{
// 将this引用的DOM元素转为JQuery对象
var obj = $(this);
// 鼠标经过时添加动画
obj.mouseover(function()
{
obj.animate({paddingLeft:options.padding},options.time);
obj.css("backgroundColor",options.color);
});
// 鼠标离开时恢复
obj.mouseout(function()
{
obj.animate({paddingLeft:0},options.time);
obj.css("backgroundColor","");
});
});
} //不要有;号 否则出错
});
})(jQuery);
测试插件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插件测试</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.example-plugin.js"></script>
</head>
<body>
<h2>自定义JQuery插件测试</h2>
<div>
<div style="border:1px solid red;width:200px;">JavaScript技术</div>
<div style="border:1px solid red;width:200px;">DOM技术</div>
<div style="border:1px solid red;width:200px;">CSS技术</div>
<div style="border:1px solid red;width:200px;">JQuery技术</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("div>div").dwqs({padding:35,time:500,color:"#ccc"});
});
</script>
</body>
</html>
效果演示：http://jqplugin.sinaapp.com/test.html
代码下载：http://download.csdn.net/detail/u011043843/8235387
原文首发：http://www.ido321.com/1333.html
时间： 2024-08-25 04:29:09