[js插件开发教程]定制一个手风琴插件(accordion)
本文带来一个垂直方向的手风琴插件开发，可以定制的功能如下：
contentClass : 'panel', //面板样式
navClass : 'nav', //导航样式
activeClass : 'active', //导航激活样式
triggerElements : '*', //触发元素
activeIndex : 0, //默认选中的元素
evType : 'click', //默认触发的事件
animate : true, //是否支持动画渐变
multiple : false //是否支持多个面板同时展开
调用方法：
$(".accordion").accordion( { animate : true, multiple : true } ); //支持多个面板同时展开， 支持动画效果
效果预览：
$(".accordion").accordion( { animate : false, multiple : true } );
这种效果就是跟选项卡一样
$(".accordion").accordion( { 'animate' : true } );
不支持多个面板，永远只有一个面板被打开
效果预览：
完整的手风琴插件代码：
html部分:
<!DOCTYPE html>
<html>
<head lang="en">
<!--作者:ghostwu(吴华)-->
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/accordion.css"/>
<script src="./js/accordion.js"></script>
<script>
window.onload = function(){
$(".accordion").accordion( { 'animate' : true } );
}
</script>
</head>
<body>
<div class="main">
<div class="accordion">
<div class="panel">面板1</div>
<div class="nav">导航1</div>
<div class="panel">面板2</div>
<div class="nav">导航2</div>
<div class="panel">面板3</div>
<div class="nav">导航3</div>
<div class="panel">面板4</div>
<div class="nav">导航4</div>
<div class="panel">面板5</div>
<div class="nav">导航5</div>
</div>
</div>
</body>
</html>
css样式部分:
* {
margin:;
padding:;
}
body {
font-size: 14px;
font-family: Tahoma, Verdana,"Microsoft Yahei";
}
a{
text-decoration: none;
color:#000;
}
ul,li{
list-style-type: none;
}
img {
border:none;
}
.main {
width:960px;
margin:20px auto;
}
.accordion{
width:400px;
margin: 0 auto 10px;
}
.accordion .nav {
border-bottom: 1px dashed #0064cd;
}
.accordion .panel{
height:100px;
background:#ccc;
}
.accordion .nav{
height:30px;
background:#999;
}
.accordion .active{
background:#ff0;
}
js插件部分：
/**
* Created by ghostwu(吴华).
*/
(function(){
var G = function( selectors, context ){
return new G.fn.init( selectors, context );
}
G.fn = G.prototype = {
length : 0,
constructor : G,
size : function(){
return this.length;
},
init : function( selector, context ){
this.length = 0;
context = context || document;
if ( selector.indexOf( '#' ) == 0 ){
this[0] = document.getElementById( selector.substring( 1 ) );
this.length = 1;
}else {
var aNode = context.querySelectorAll( selector );
for( var i = 0, len = aNode.length; i < len; i++ ) {
this[i] = aNode[i];
}
this.length = len;
}
this.selector = selector;
this.context = context;
return this;
}
} G.fn.init.prototype = G.fn;
G.extend = G.fn.extend = function () {
var i = 1,
len = arguments.length,
dst = arguments[0],
j;
if (dst.length === undefined) {
dst.length = 0;
}
if (i == len) {
dst = this;
i--;
}
for (; i < len; i++) {
for (j in arguments[i]) {
dst[j] = arguments[i][j];
dst.length++;
}
}
return dst;
}; function css(obj, attr, value) {
if (arguments.length == 3) {
obj.style[attr] = value;
} else {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
} function animate(obj, attr, fn) {
clearInterval(obj.timer);
var cur = 0;
var target = 0;
var speed = 0;
//var start = new Date().getTime();//起始时间
obj.timer = setInterval(function () {
var bFlag = true;
for (var key in attr) {
if (key == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, key));
}
target = attr[key];
speed = ( target - cur ) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
console.log( cur, target );
if (cur != target) {
bFlag = false;
if (key == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")";
} else {
obj.style[key] = cur + speed + "px";
}
}
}
if (bFlag) {
//var end = new Date().getTime();//结束时间
//console.log( '总计:', ( end - start ) );
clearInterval(obj.timer);
fn && fn.call(obj);
}
}, 30 );
} G.fn.accordion = function( options ){
options = options || {};
var defaults = {
contentClass : 'panel',
navClass : 'nav',
activeClass : 'active',
triggerElements : '*',
activeIndex : 0,
evType : 'click',
animate : true,
multiple : false
}; var opt = G.extend( {}, defaults, options ); var aNavEle = this[0].querySelectorAll( "." + opt.navClass ),
aPanel = this[0].querySelectorAll( "." + opt.contentClass ); var _api = {}; var panelHeight = parseInt( css( aPanel[opt.activeIndex], 'height' ) );
_api.setIndex = function( curIndex, effect ){
if ( opt.multiple ) {
if ( effect ) {
if ( parseInt( css( aPanel[curIndex], 'height' ) ) == 0 ) {
aPanel[curIndex].style.display = 'block';
animate( aPanel[curIndex], { 'height' : panelHeight } );
}else {
animate( aPanel[curIndex], { 'height' : 0 }, function(){
this.style.display = 'none';
} );
}
}else {
if ( css( aPanel[curIndex], 'display' ) == 'block' ){
aPanel[curIndex].style.display = 'none';
}else {
aPanel[curIndex].style.display = 'block';
}
if ( aNavEle[curIndex].classList.contains( 'active' ) ) {
aNavEle[curIndex].classList.remove( 'active' );
}else {
aNavEle[curIndex].classList.add( 'active' );
}
}
}else {
if ( effect ) {
for ( var i = 0; i < aPanel.length; i++ ) {
if( i != curIndex ) {
if ( aPanel[i].style.display == 'block' ){
animate( aPanel[i], { 'height' : 0 }, function(){
this.style.display = 'none';
} );
}else{
aPanel[i].style.display = 'none';
}
}else {
aPanel[curIndex].style.display = 'block';
animate( aPanel[curIndex], { 'height' : panelHeight } );
}
}
}else {
for ( var i = 0 ; i < aPanel.length; i++ ){
aPanel[i].style.display = 'none';
aNavEle[i].classList.remove( 'active' );
}
aPanel[curIndex].style.display = 'block';
aNavEle[curIndex].classList.add( 'active' );
}
}
}; _api.setIndex( opt.activeIndex, opt.animate ); for( var i = 0 ; i < aNavEle.length; i++ ) {
aNavEle[i].index = i;
aNavEle[i].addEventListener( opt.evType, function(){
_api.setIndex( this.index, opt.animate );
}, false );
}
return this;
} var $ = function( selectors, context ){
return G( selectors, context );
}
window.$ = $;
})();
[js插件开发教程]定制一个手风琴插件(accordion)的更多相关文章
- [js插件开发教程]实现一个比较完整的开源级选项卡插件
在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>> [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...
- jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
- [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...
- [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...
- 基于jQuery开发的手风琴插件 jquery.accordion.js
1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码: /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...
- chrome 浏览器插件开发（一）—— 创建第一个chrome插件
最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...
- 使用jQuery开发accordion手风琴插件
一.插件效果 手风琴插件常用的功能均已实现,包括:手风琴菜单项的折叠展开效果.选中指定菜单项.判断菜单项是否选中等. 效果如下: 二.插件内部HTML元素结构 <!-- accordioon组件 ...
- jQuery插件开发教程
jQuery插件开发教程 ——让你的jQuery水平提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...
- 分享我对JS插件开发的一些感想和心得
本文阅读目录: •起因•如何开发一个轻量级的适用性强的插件•总结 起因 如果大家平时做过一些前端开发方面的工作,一定会有这样的体会:页面需要某种效果或者插件的时候,我们一般会有两种选择: 1.上网查找 ...
随机推荐
- jvm内存回收诡异现象
在知乎上看到一篇提问,于是做了个实验帮助他解答,这里整理成一篇文章分享一下. 先看代码如下代码: /** * Created on 2017/12/16. * * -verbose:gc -XX:+U ...
- RecyclerView.Adapter优化了吗？
昨天写了一篇「还在用ListView?」讲的内容是RecyclerView的使用技巧以及一些经常使用的开源库.有朋友反馈"我已经在用recyclerview了",那么怎样让它更好用 ...
- 开源Android-PullToRefresh下拉刷新源代码分析
PullToRefresh 这个库用的是很至多.github 今天主要分析一下源代码实现. 我们通过ListView的下拉刷新进行分析.其他的类似. 整个下拉刷新 父View是LinearLayo ...
- MyBatis_延迟加载01
一.延迟加载 MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时, 按照设置延迟规则推迟对关联对象的select查询.延迟加载可以有效的减少数据库压力. MyBatis的延迟加载只是对关联 ...
- TableML-GUI篇(Excel编译/解析工具)
项目情况 本文接上篇TableML Excel编译/解析工具,本文主要介绍GUI工具的使用,及配置项,如果你想了解此工具更加详细的说明,请阅读上篇文章. 项目地址:https://github.com ...
- Tomcat配置(二)：tomcat配置文件server.xml详解和部署简介
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- 深入理解计算机系统_3e 第五章家庭作业 CS:APP3e chapter 5 homework
5.13 A. B. 由浮点数加法的延迟,CPE的下界应该是3. C. 由整数加法的延迟,CPE的下界应该是1. D. 由A中的数据流图,虽然浮点数乘法需要5个周期,但是它没有"数据依赖&q ...
- Pseudo-devices On GNU/Linux
先分享一则有意思Q&A,来自The FreeBSD Funnies 17.4 . Where does data written to* /dev/null* go? It goes in ...
- springCloud项目练习
1.https://gitee.com/xfdm/FCat angular4.springcloud开源实战项目:FCat项目(springcloud.mybatis.redis.angular4)是 ...
- 浅析JavaScript的字符串查找函数：indexOf和search
语法 ①indexOf:方法可返回某个指定的字符串值在长字符串中首次出现的位置.如果被查找字符串没有找到,返回-1. indexOf 说明:该方法将从头到尾地检索字符串 stringObject,看它 ...