在上一篇笔记本中，讲解了如何利用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. POJ 1743 Musical Theme（后缀数组）

    题意:有n个数值,算出相邻两个值的差值,此时有n-1个值的序列,把这序列当做字符串的话,求最长重复子串,且这两个子串不能重叠. 分析:后缀数组解决.先二分答案,把题目变成判定性问题:判断是否存在两个长 ...

  2. PowerDesigner建立与数据库的连接，以便生成数据库和从数据库生成到PD中。

    第一步,打开PD15,找到[Database],如图所示: 第二步,点击新建按钮,创建一个新的ODBC连接. 第三步,这里选择系统数据源,并选择Oracle 第四步,这里需要注意,服务器需要写的是Or ...

  3. Java安全编码之用户输入

    0x00 安全引言 1.传统Web应用与新兴移动应用 (1)传统Web应用:浏览器 HTTP 服务器(2)新兴移动应用:APP HTTP 服务器 从安全角度看,传统Web应用与新兴移动应用没有本质区别 ...

  4. Mac下无法拷贝文件到移动硬盘

    Mac下无法拷贝文件到移动硬盘? 是移动硬盘的文件格式的问题. Mac系统无法识别 NTFS 格式的文件. 将移动硬盘格式化为 exFAT 格式的. 别担心,exFAT 格式的硬盘在Windows下也 ...

  5. javascript 一个关于时间排序的算法（一个页面多个倒计时排序）

    上周要做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页 ...

  6. Java生成可执行文件 & MANIFEST.MF问题 METAINFO

    用 Intellij 进行打包.在File -> Project Structure里面. 然后应该会自动生成Jar包(也可以Build->Build Artifacts) xxx.jar ...

  7. innodb锁之间的兼容性判断

    检查锁与锁之间的兼容性 路径:/mysql-5.5.43/storage/innobase/lock/lock0lock.c 实现:见锁的强度比较  row 可理解为 lock 的锁模式  colum ...

  8. HDU (线段树 单点更新) I Hate It

    和上一道题没什么变化,只不过把单点增减变成了单点替换,把区间求和变成了区间求最大值. #include <cstdio> #include <algorithm> using ...

  9. 51nod1757 大灾变

    能想到二分答案+最大流判断是否符合.但是不知道如何建图qaq.参考的是http://blog.csdn.net/fsss_7/article/details/52132046的建图方法 #includ ...

  10. Windows 8获取开发者账户

    使用PowerShell获取开发者账户,可以在本地调试Metro APP C:\PS> Show-WindowsDeveloperLicenseRegistration //安装licence ...