用实例讲解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设置。