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

DOM笔记（七）：开发JQuery插件的更多相关文章

  1. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  2. 开发JQuery插件(转)

    教你开发jQuery插件(转)   阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...

  3. 开发jQuery插件的基本步骤

    在进行开发jQuery插件前,首先要了解一些知识: 1.闭包 1.1.闭包的作用: · 避免全局依赖 · 避免第三方破坏 · 兼容jQuery操作符'$'和jQuery 1.2.闭包的形式 (func ...

  4. 自己动手开发jQuery插件

    因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...

  5. 快速开发 jQuery 插件的 10 大技巧（转）

    转自:http://www.oschina.net/news/41776/jquery-10-tips 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模 ...

  6. 快速开发 jQuery 插件的 10 大技巧

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. ...

  7. 如何开发jQuery插件

    一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为,为JQuery 类添加一个静态方法. $.fn.extend(obje ...

  8. 快速开发jQuery插件的10大技巧

    原文链接:http://wiki.itivy.com/?p=36 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & ...

  9. 快速开发 jQuery 插件的 10 大技巧(转)

    1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...

随机推荐

  1. WebMvcConfigurerAdapter

    spring Boot 默认的处理方式就已经足够了,默认情况下Spring Boot 使用WebMvcAutoConfiguration中配置的各种属性. 建议使用Spring Boot 默认处理方式 ...

  2. 人脸识别算法准确率最终超过了人类 The Face Recognition Algorithm That Finally Outperforms Humans

    Everybody has had the experience of not recognising someone they know—changes in pose, illumination ...

  3. linux内核编程笔记【原创】

    以下为本人学习笔记,如有转载请注明出处,谢谢 DEFINE_MUTEX(buzzer_mutex); mutex_lock(&buzzer_mutex); mutex_unlock(& ...

  4. NandFlash详述【转】

    NandFlash详述 转自:http://wenku.baidu.com/view/04d9330bb52acfc789ebc92f.html?re=view 1. 硬件特性: [Flash的硬件实 ...

  5. spring3定时器简单配置

    最近在做oa项目中写到一个功能,就是员工每天的签到和签退.当时想了很久都没有想出来,后来自己上网查了一下spring的定时器,然后就有了思路. 下面我贴上自己用到的这个定时器的配置.希望能够和大家一起 ...

  6. Mac 的“任务管理器” —— 活动监视器

    昨天关机时,提示说 Safari 阻止了关机程序,请先关闭 Safari .再看 Safari 的退出按钮已灰.知道是 Safari 的进程僵死了. 根据对 Windows 使用的经验,首先想到了“任 ...

  7. Volley HTTP库系列教程(1)简介及优点

    Transmitting Network Data Using Volley Get  started Dependencies and prerequisites Android 1.6 (API ...

  8. java 字符串函数

    string1.equals(string2) 比较字符串 substring()它有两种形式,第一种是:String substring(int startIndex)第二种是:String sub ...

  9. cdoj 1334 郭大侠与Rabi-Ribi 贪心+数据结构

    郭大侠与Rabi-Ribi Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Su ...

  10. 标准模板库(STL)学习探究之stack

    标准模板库(STL)学习探究之stack queue priority_queue list map/multimap dequeue string