时间:2021-07-01 10:21:17 帮助过:18人阅读
本文实例为大家分享了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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。