在上一篇笔记本中，讲解了如何利用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. Oracle ->> 变量赋值 Demo

    刚学Oracle,学习学习别人的代码.这段代码时从下面的博文中摘取的:http://www.cnblogs.com/mq0036/p/4155774.html declare l_dept ; cur ...

  2. 机器人学 —— 轨迹规划（Sampling Method）

    上一篇提到,机器人轨迹规划中我们可以在 Configuration Space 中运行A* 或者 DJ 算法.无论A* 还是DJ 算法,都必须针对邻域进行搜索,如果2自由度则有4邻域,2自由度则有8邻 ...

  3. 快速获取Windows系统上的国家和地区信息

    Windows系统上包含了200多个国家和地区的数据,有时候编程需要这些资料.以下代码可以帮助你快速获取这些信息.将Console语句注释掉,可以更快的完成分析. static void Main(s ...

  4. C# 获取打印机状态

    public static string GetPrinterStatus(string PrinterName)    {    int intValue = GetPrinterStatusInt ...

  5. poj - 3225 Roadblocks(次短路）

    http://poj.org/problem?id=3255 bessie 有时会去拜访她的朋友,但是她不想走最快回家的那条路,而是想走一条比最短的路长的次短路. 城镇由R条双向路组成,有N个路口.标 ...

  6. Tmall发送码asp验证sing(自有码开发)

    <%''查询通知应答类'============================================================================'api说明:'g ...

  7. H5移动前端完美布局之padding

    序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padd ...

  8. CollectionBase类

    在命名空间System.Collections下的CollectionBase类 The CollectionBase class exposes the interfaces IEnumerable ...

  9. UML类图几种关系的总结，泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖

    在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization),关联(Association),聚合(Aggregation),组合(Compositi ...

  10. HDU 2144 (最长连续公共子列 + 并查集) Evolution

    我发现我一直理解错题意了,这里的子序列指的是连续子序列,怪不得我写的LCS一直WA 顺便复习一下并查集 //#define LOCAL #include <iostream> #inclu ...