DOM笔记(七):开发JQuery插件

在上一篇笔记本中,讲解了如何利用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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。