本文實例為大家分享了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);以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答