用实例讲解jQuery插件封装思路-来自于三人行慕课

原文链接：https://www.3mooc.com/front/articleinfo/220

之前发过一个jQuery手风琴效果的练习案例，今天就拿这个案例来分享一下封装插件的思路。

HTML和CSS的布局和功能基本实现就不在这里写了，可以去：http://www.3mooc.com/front/articleinfo/201

这里查看。

我们今天要做的是把这个功能封装成一个插件，只需要调用一个方法就能使用这个手风琴效果，如图：

接下来我们进行对功能封装的讲解。

//给jQuery添加accordion（手风琴的英文）方法

$.fn.accordion = function (colors, width) {

//设置默认的colors和width参数，避免传参数时报错

colors = colors || [];

width = width || 0;

var $li = this.find(“li”);

var boxLength = this.width();

var maxLength = boxLength - ($li.length - 1) * width;

var avgLength = boxLength / $li.length;

//更改li的颜色，使用时可以通过声明数组的方式设置颜色

$li.each(function (i, e) {

$(e).css("backgroundColor", colors[i]);

});

//给li注册鼠标经过事件

//给li的宽度进行改变

$li.on(“mouseenter”, function () {

$(this).stop().animate({width: maxLength}).siblings().stop()

.animate({width: width})

});

//鼠标离开时宽度改变

$li.on(“mouseleave”, function () {

$li.stop().animate({width: avgLength});

});

};

把这段代码保存成一个js文档，和jQuery文件一起引入到HTML中，就可以通过使用一个accordion()方法来使用了。

在调用这个方法的时候，可以在括号里传递colors参数和width参数来设置每个li的颜色和宽度。li的背景图片可以通过CSS设置。