在上一篇笔记本中,讲解了如何利用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. 数值的整数次方(剑指offer面试题11)

    实现函数 double Power(double base, int exponent),即乘方运算. 考虑问题 exponet < 0 , 可以转化为 1.0 / Power(base, -1 ...

  2. 从WeUI学习到的知识点

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

  3. USACO Section 2.4: Fractions to Decimals

    乍看题目感觉有难度,实际分析后其实是道简单题 /* ID: yingzho1 LANG: C++ TASK: fracdec */ #include <iostream> #include ...

  4. flex Bindable

    [Bindable]大概又是Flex用得最多的元数据了.刚开始用用确实好简单,效率真是没的说.不过这几天用着却碰到了些问题,我自己搜集了些资料,想着有必要在blog里总结一下吧. 啥是元数据(meta ...

  5. 你猜……你再猜

    『男』:你喜欢我吗? 『女』:你猜. 『男』:喜欢. 『女』:你再猜. 『男』:--

  6. 基于Linux的oracle数据库管理 part1( 准备及linux基础 )

    主要内容 1. 安装VMware tools (好处, 显示效果增强, 从虚拟机出来不需要alt+ctrl 切换) 2. Linux 启动过程, 方便以后oracle 自动启动与关闭 3. Linux ...

  7. Bootstrap_组件

    一.Glyphicons 字体图标 1.所有可用的图标查看:http://v3.bootcss.com/components/ 2.获取字体图标:我们已经在 环境安装 章节下载了 Bootstrap ...

  8. js之客户端检测

    1 能力检测判断是否有某个属性或方法,例:在低版本中的opera浏览器中,window下有个opera属性 if (window.opera) { alert("opera"); ...

  9. web前端调试工具

    1.firebug入门指南 http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html 2. Console命令详解,让调试js代码变得更 ...

  10. [转] gc tips(1)

    所有应用软件都需要管理内存,一个应用软件的内存管理系统包括了如下准则:什么时候派发内存,要派发多少内存,什么时候把东西放到回收站,以及什么时候清空回收站.MMgc是Flash Player几乎所有内存 ...