jQuery Collapse1.1.0折疊插件簡單使用
更新時間:2017年08月28日 09:39:28 作者:夜愿生
這篇文章主要介紹了jQuery Collapse1.1.0折疊插件的使用方法
,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery Collapse1.1.0折疊插件的使用,供大家參考,具體內(nèi)容如下
/*!
* 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: '',//默認空為第一個標(biāo)簽
* content: '',//默認空為第二個標(biāo)簽
* 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);
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JQuery DataTable刪除行后的頁面更新利用Ajax解決
使用Jquery的DataTable進行數(shù)據(jù)表處理非常方便,常遇到的一個問題就是刪除一行后頁面必須進行更新,下面與大家分享下使用Ajax的解決方法2013-05-05
jquery設(shè)置元素的readonly和disabled的寫法
Jquery的api中提供了對元素應(yīng)用disabled和readonly屬性的方法,在這里記錄下,感興趣的朋友可以練練手了2013-09-09

