jQuery插件的写法分享


Posted in Javascript onJune 12, 2013

1、概述

先看看html代码

<ul id="catagory">
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Asp.net</a></li>
    <li><a href="#">Sql Server</a></li>
    <li><a href="#">CSS</a></li>
</ul>

比如我们要实现当光标移动到a标签上时,a标签向右移动一段距离,离开时a位置恢复。实现方法如下:

$(document).ready(function() {
    $("#catagory a").hover(function() {
        $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
    }, function() {
        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
    });
});

现在我们将这个方法进行扩展,写成jQuery插件的形式,以后也能在别的项目中使用,并且可以方便的更改一些属性值,现在我们来看看jQuery插件的写法。

2、jQuery插件的结构

下边这个结构应该是编写jQuery插件的一个比较好的结构,我将原作者的一些注释进行了相应的翻译。

//为避免冲突,将我们的方法用一个匿名方法包裹起来
(function($) {
    //扩展这个方法到jquery
    $.fn.extend({
        //插件名字
        pluginname: function() {
            //遍历匹配元素的集合
            return this.each(function() {
                //在这里编写相应代码进行处理 
            });
        }
    });
 //传递jQuery到方法中,这样我们可以使用任何javascript中的变量来代替"$"      
})(jQuery);

接下来,我们给插件中加入一些可以改变的属性,这样用户可以根据自己的需要来做一些更改。同时,我们应提供相应的默认值。

(function($){  
    $.fn.extend({   
 //将可选择的变量传递给方法
        pluginname: function(options) {  
            //设置默认值并用逗号隔开
            var defaults = {  
                padding: 20,  
                mouseOverColor : '#000000',  
                mouseOutColor : '#ffffff'  
            }  
            var options =  $.extend(defaults, options);  
            return this.each(function() {  
                var o = options;  
                //这里编写相应代码 
                //可以像下边这样获取变量值 
                alert(o.padding);  
            });  
        }  
    });  
})(jQuery); 

3、实现jQuery插件

(function ($) {
    $.fn.extend({
        //插件名称 - paddingList
        paddingList: function (options) {
            //参数和默认值
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };
            var options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                //将元素集合赋给变量 本例中是 ul对象 
                var obj = $(this);
                //得到ul中的a对象
                var items = $("li a", obj);
                //添加hover()事件到a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false表示不添加到动画队列中
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });
            });
        }
    });
})(jQuery);

最后,使用插件的方法如下:

//使用插件
$(document).ready(function() {
    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});
作者:朋友的你 来源:jQuery学习
Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
Javascript中replace()小结
Sep 30 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
JS实现简易留言板特效
Dec 23 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 #Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 #Javascript
Jquery 表单验证类介绍与实例
Jun 09 #Javascript
js调用后台servlet方法实例
Jun 09 #Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 #Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 #Javascript
ScrollDown的基本操作示例
Jun 09 #Javascript
You might like
YB217、YB235、YB400浅听
2021/03/02 无线电
Admin generator, filters and I18n
2011/10/06 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
javascript 数组操作详解
2015/01/29 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
vue resource post请求时遇到的坑
2017/10/19 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python中的随机函数小结
2018/01/27 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
如何实现jdbc性能优化
2012/07/30 面试题
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
Java程序员综合测试题
2014/04/25 面试题
社会实践心得体会
2014/01/03 职场文书
护士进修自我鉴定
2014/02/07 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
医院义诊活动总结
2014/07/04 职场文书
企业2014年度工作总结
2014/12/10 职场文书
写给医院的感谢信
2015/01/22 职场文书
放飞理想主题班会
2015/08/14 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android