在上一篇笔记本中，讲解了如何利用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. 从WeUI学习到的知识点

    WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Ic ...

  2. Partitioner

    partitioner 是map中的数据映射到不同的reduce时的根据.一般情况下,partitioner会根据数据的key来把数据平均分配给不同的reduce,同时保证相同的key分发到同一个re ...

  3. makefile中的自动化变量 【转】

    转自:http://blog.chinaunix.net/uid-28458801-id-3495215.html 自动化变量 模式规则中,规则的目标和依赖文件名代表了一类文件名:规则的命令是对所有这 ...

  4. django中post方法和get方法的不同

    当我们提交表单仅仅需要获取数据时就可以用GET: 而当我们提交表单时需要更改服务器数据的状态,或者说发送e-mail,或者其他不仅仅是获取并显示数据的时候就使用POST. 在这个搜索书籍的例子里,我们 ...

  5. Android Touch(4)我不知道的MotionEvent（＊）

    1,MotionEvent的复制或构造 有时候可能要保存一个MotionEvent, 它的构造方法是匿名的,不能直接创建,对外提供的获取对象的接口是静态的obtain方法,可以从一个MotionEve ...

  6. serialize-and-deserialize-bst

    https://leetcode.com/problems/serialize-and-deserialize-bst/ 1. 用到Java Queue接口, // LinkedList实现了Queu ...

  7. org.codehaus.jackson.map.JsonMappingException: No serializer found for class org.hibernate.proxy.pojo.javassist.

    2011-08-16 13:26:58,484 [http-8080-1] ERROR [core.web.ExceptionInterceptor] - org.codehaus.jackson.m ...

  8. 读写INI辅助类

    using System.Text; using System.Runtime.InteropServices; using System; namespace Benson.INI读写 { #reg ...

  9. bzoj1564: [NOI2009]二叉查找树

    dp. 首先这棵树是一个treap. 权值我们可以改成任意实数,所以权值只表示相互之间的大小关系,可以离散化. 树的中序遍历是肯定确定的. 用f[l][r][w]表示中序遍历为l到r,根的权值必须大于 ...

  10. 嵌入式linux内核是什么？

    linux内核是一种可以被内核动态加载(insmode)和卸载(rmmod)的可执行二进制代码 最简单的内核 #include <linux/module.h> #include < ...