在上一篇笔记本中，讲解了如何利用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. PHP文件上传代码和逻辑详解

    文件上传的逐步完善------ [简单的上传:]   <form action="upload.php"  method="post"  enctype= ...

  2. 2-Medium下的MultipleCommandAssembly

    1.首先创建一个控制台项目 2.添加引用[红色的都是将项目添加为引用,其中蓝色的log4net是直接从源代码下的Reference文件夹下引用的dll] 3.写代码 1)首先将config配置好[ht ...

  3. [51NOD]大数加法（模拟）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1005 要处理符号,还要特别注意0和连续进位等情况.偷懒使用st ...

  4. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  5. HTTP全部报文首部字段

    总结了一下HTTP各种报文首部字段. HTTP报文类型与结构 HTTP报文结构 报文首部 空行(CR+LF) 报文主体 HTTP报文类型 http有两种类型报文,请求报文和响应报文两种报文的首部结构如 ...

  6. VMware11安装Mac OS X10提示不可恢复错误解决

    VMware11安装Mac OS X10提示不可恢复错误(vcpu-0)怎么办?本文将详细介绍如何解决VMware11安装Mac OS X10提示不可恢复错误. 工具/原料   VMware11 PC ...

  7. web.xml中load-on-startup的作用（转）

    web.xml中load-on-startup的作用 如下一段配置,熟悉DWR的再熟悉不过了:<servlet>   <servlet-name>dwr-invoker< ...

  8. NBUT 1120 Reimu's Teleport （线段树）

    题意: 有n个格子,一开始全部面向top.接下来的每次修改F a b ,如果 a>b则将a~b之间的格子全面置为向右,否则置为向左.对于每个询问Q输出向左.top.右的数量. 思路: 普通线段树 ...

  9. UIPanGestureRecognizer中translationInView的理解

    原因是在破船大牛的blog上面看到了一个demo #import <UIKit/UIKit.h> @interface ViewController : UIViewController ...

  10. javamail模拟邮箱功能发送电子邮件-基础实战篇（javamail API电子邮件实例）

    引言: JavaMail 是一种可选的.能用于读取.编写和发送电子消息的包 JavaMail jar包下载地址:http://java.sun.com/products/javamail/downlo ...