jQuery Collapse1.1.0折叠插件简单使用
程序员文章站
2022-09-08 23:09:11
本文实例为大家分享了jquery collapse1.1.0折叠插件的使用,供大家参考,具体内容如下
/*!
* jquery collapse - a wiz...
本文实例为大家分享了jquery collapse1.1.0折叠插件的使用,供大家参考,具体内容如下
/*! * jquery collapse - a wizard plugin - http://www.cnblogs.com/yeyuansheng/ * ------------------------------------------------------------------------------------ * * @version 1.1.0 * @since 2017.08.28 * @author 夜原生 * @documentation http://www.cnblogs.com/yeyuansheng/ * * usage with default values: * ------------------------------------------------------------------------------------ * { * panel: '',//默认空为第一个标签 * content: '',//默认空为第二个标签 * active: 'active',//点击样式 * shut: true,//展开的在次点击可闭合 * style: 'y',//x,y,0上下左右滑动展开/无动作展开 * speed: 200,//动作的速度 * event: "click",//动作 * class: 'active',//item 样式 * func: function(){},//增加事件 * open:''//默认打开 * } */ (function($) { var collapse = { 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){ var opts = $.extend({}, $.fn.collapse.defaults, options); if(opts.style == 'x' && options.shut == 'undefined'){ opts.shut = false; } return opts; }, clickchange:function(obj,op){ var panel = (op.panel == '')?$(obj).children(':first'):$(obj).find('> '+op.panel); panel.on(op.event,function(){ var parent = $(this).parent(); var sub = (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(){ var t = $(this); if(t.hasclass(op.active)){ var uls = (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){ var uls = (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){ var li = $(obj).children().eq(open[0]); li.addclass(op.active); var ul = (op.content == '')?li.children().eq(1):li.find('> '+op.content); ul.show(); ul.children().eq(open[1]).addclass(op.class); } } $.fn.collapse = function(options){ var opts = 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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Angular.js中数组操作的方法教程
下一篇: 一个人笑死了原因是看了这条笑话
推荐阅读