完整代码下载点击我的GitHub:
https://github.com/XingJYGo/jquery-accordion
1 手风琴的效果展示如下:
2 封装插件目录结构如下:
主要包括:HTML结构, CCS样式,JS文件以及jquary库.
3 插件封装步骤如下:
3-1首先,编写HTML静态结构:
<div id="box"><ul><li></li><li></li><li></li><li></li><li></li></ul> </div>
3-2 然后设置CSS的手风琴样式
* {margin: 0;padding: 0;list-style: none; }div {width: 1200px;height: 400px;border: 2px solid #000;margin: 100px auto; }ul {width: 1300px; }li {/*width: 240px;*/height: 400px;float: left;}
3-3抽取CSS样式到jquery-accordion.css,HTML文件导入CSS样式.
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="jquery-accordion.css"> </head>
4 js中的代码书写
4-1 首先导入jquary库和手风琴插件的js文件.
<script src="jquery-1.12.4.js"></script> <script src="jquery.accordion.js"></script>
4-2 编写手风琴插件js文件:
手风琴插件的核心需求有:
1 .动态添加颜色的需求,以及动态计算盒子的宽度
2 .找到里面所有的li,给li注册鼠标移入事件
3. 找到最外面的大盒子,给大盒子注册鼠标移出事件
4 .自定义创建颜色对象,遍历添加颜色属性.
由于要使用jquery对象调用,所以方法要加载jquery的原型上:
所有的方法都要包含于这个函数内:
$.fn.accordion = function(obj){
}
//动态的计算每一个li的宽度// box的宽度 / 里面li的数量var width = this.innerWidth() / this.find('li').length; //计算宽度this.find('li').width(width); //给每一个li赋值宽度//处理一下用户传递进来的参数obj.maxWidth = obj.maxWidth > 1000 ? 1000 : obj.maxWidth;//计算其他盒子的宽度// (整个box的宽度- 当前li的宽度) / (this.find('li').length - 1)var minWidth = (this.innerWidth() - obj.maxWidth) / (this.find('li').length - 1);//一旦调用方法,就把颜色传递进来this.find('li').each(function(index, item)//给每一个li加背景颜色$(item).css('backgroundColor', obj.colors[index]);})
//1.找到里面所有的li,给li注册鼠标移入事件this.find('li').on('mouseenter', function(){$(this).stop(true).animate({width:obj.maxWidth}).siblings().stop(true).animate({width: minWidth});}); // 2. 找到最外面的大盒子,给大盒子注册鼠标移出事件this.on('mouseleave', function(){$(this).find('li').stop(true).animate({width : width});});
5 最后,导入jQuery库,手风琴插件,开始创建手风琴 .
<script src="jquery-1.12.4.js"></script> <script src="jquery.accordion.js"></script> <script>$('#box').accordion({colors:['red','green','blue', 'yellow', 'pink'],maxWidth: 800}); </script>
和==的区别)
