In diesem Artikel wird hauptsächlich die Verwendung des jQuery Collapse1.1.0-Falt-Plug-Ins vorgestellt , hat einen gewissen Referenzwert, interessierte Freunde können sich darauf beziehen, ich hoffe, es kann jedem helfen.
/*!
* 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);Verwandte Empfehlungen:
CSS-Border-Collapse-Eigenschaft für überlappende Zellränder in Tabellen
Detaillierte Erläuterung der Verwendung von CSS-Border-Collapse
Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung des jQuery Collapse1.1.0-Folding-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
