ChinaCoder前端开发教你轻松开发JQuery插件

前端开发中写Javascript是不可或缺的，而当下JQuery不可置疑是当下最流行最强大的Javascript库，其强大的功能以及有点这里我不多做解释，今天，Chinacoder前端开发小站站长，用一个简单的jQuery小插件向大家展示JQuery插件的具体写法。

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位置恢复。非插件JQuery实现方法如下:

$(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);

 

4、版权注释以及命名插件

/*
 * jQuery-anipadding-0.1.js   (名字一定要霸气才行)
 * Copyright (c) 2013 Nicky Yan  http://www.chinacoder.cn
 * Date: 2013-11-16
 * 使用anipadding可以方便实现动态效果。先提供的功能有划过位移,鼠标移上高亮显示.
 */
(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);

 

5、调用插件（本demo演示参考本站右侧友情链接板块）
一、不改变参数进行调用

//使用插件  
$(document).ready(function() {
    $("#catagory").paddingList( );
});

 

二、改变参数进行调用

//使用插件
$(document).ready(function() {
    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});

 

评论

1 楼 51xvf 2017-12-14