jQuery Collapse1.1.0折叠插件简单使用
本文实例为大家分享了jQueryCollapse1.1.0折叠插件的使用,供大家参考,具体内容如下
/*! *jQuerycollapse-AWizardPlugin-http://www.cnblogs.com/yeyuansheng/ *------------------------------------------------------------------------------------ * *@version1.1.0 *@since2017.08.28 *@author夜原生 *@documentationhttp://www.cnblogs.com/yeyuansheng/ * *Usagewithdefaultvalues: *------------------------------------------------------------------------------------ *{ *panel:'',//默认空为第一个标签 *content:'',//默认空为第二个标签 *active:'active',//点击样式 *shut:true,//展开的在次点击可闭合 *style:'y',//x,y,0上下左右滑动展开/无动作展开 *speed:200,//动作的速度 *event:"click",//动作 *class:'active',//item样式 *func:function(){},//增加事件 *open:''//默认打开 *} */ (function($){ varcollapse={ version:'1.1.0', style:{ slideRight:{ width:"hide", paddingLeft:"hide", paddingRight:"hide", marginLeft:"hide", marginRight:"hide" }, slideLeft:{ width:"show", paddingLeft:"show", paddingRight:"show", marginLeft:"show", marginRight:"show" }, slideUp:{ borderTopWidth:"hide", borderBottomWidth:"hide", paddingTop:"hide", paddingBottom:"hide", height:"hide" }, slideDown:{ borderTopWidth:"show", borderBottomWidth:"show", paddingTop:"show", paddingBottom:"show", height:"show" } }, init:function(options){ varopts=$.extend({},$.fn.collapse.defaults,options); if(opts.style=='x'&&options.shut=='undefined'){ opts.shut=false; } returnopts; }, clickChange:function(obj,op){ varpanel=(op.panel=='')?$(obj).children(':first'):$(obj).find('>'+op.panel); panel.on(op.event,function(){ varparent=$(this).parent(); varsub=(op.content=='')?parent.children().eq(1):parent.find('>'+op.content); if($(sub).is(':visible')){ if(op.shut){ collapse._animate(sub,op,0,function(){ parent.removeClass(op.class); op.func(); }); } }else{ parent.siblings().each(function(){ vart=$(this); if(t.hasClass(op.active)){ varuls=(op.content=='')?t.children().eq(1):t.find('>'+op.content); if(uls.length==0){ t.removeClass(op.active); }else{ collapse._animate(uls,op,0,function(){ t.removeClass(op.active); }); } } }); parent.addClass(op.active); collapse._animate(sub,op,1,function(){ op.func(); }); } }); }, itemChange:function(item,op){ varuls=(op.content=='')?$(item).children().eq(1):$(item).children().find('>'+op.content); uls.children().on(op.event,function(){ $(item).parent().children().each(function(){ if(op.content==''){ $(this).children().eq(1).children().removeClass(op.class); }else{ $(this).children().find('>'+op.content).children().removeClass(op.class); } }); $(this).addClass(op.class); }); }, _animate:function(obj,op,bool,callback){ if(op.style){ if(bool){ slide=(op.style=='x')?collapse.style.slideLeft:collapse.style.slideDown; }else{ slide=(op.style=='x')?collapse.style.slideRight:collapse.style.slideUp; } obj.animate(slide,op.speed,callback); }else{ (bool)?obj.show():obj.hide();//可以改用CLASS控制 } }, open:function(obj,op,open){ varli=$(obj).children().eq(open[0]); li.addClass(op.active); varul=(op.content=='')?li.children().eq(1):li.find('>'+op.content); ul.show(); ul.children().eq(open[1]).addClass(op.class); } } $.fn.collapse=function(options){ varopts=collapse.init(options); if(opts.open!='')collapse.open(this,opts,opts.open); $(this).children().each(function(){ collapse.clickChange(this,opts); collapse.itemChange(this,opts); }); } $.fn.collapse.defaults={ panel:'', content:'', active:'active', shut:true, style:'y', speed:200, event:"click", class:'active', func:function(){}, open:'' } })(jQuery);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。