jQuery Collapse1.1.0折疊插件簡單使用
更新時(shí)間:2017年08月28日 09:39:28 作者:夜愿生
這篇文章主要介紹了jQuery Collapse1.1.0折疊插件的使用方法
,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了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: '',//默認(rèn)空為第一個(gè)標(biāo)簽 * content: '',//默認(rèn)空為第二個(gè)標(biāo)簽 * active: 'active',//點(diǎn)擊樣式 * shut: true,//展開的在次點(diǎn)擊可閉合 * style: 'y',//x,y,0上下左右滑動(dòng)展開/無動(dòng)作展開 * speed: 200,//動(dòng)作的速度 * event: "click",//動(dòng)作 * class: 'active',//item 樣式 * func: function(){},//增加事件 * open:''//默認(rèn)打開 * } */ (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 文本框得失焦點(diǎn)的簡單實(shí)例
本篇文章主要是對jQuery 文本框得失焦點(diǎn)的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02JQuery DataTable刪除行后的頁面更新利用Ajax解決
使用Jquery的DataTable進(jìn)行數(shù)據(jù)表處理非常方便,常遇到的一個(gè)問題就是刪除一行后頁面必須進(jìn)行更新,下面與大家分享下使用Ajax的解決方法2013-05-05jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
在圖片加載前顯示一個(gè)加載標(biāo)志,當(dāng)圖片下載完畢后顯示圖片出來 可對圖片進(jìn)行是否自動(dòng)縮放功能2008-12-12jquery實(shí)現(xiàn)上下左右滑動(dòng)的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)上下左右滑動(dòng)的方法,是jQuery特效中非常典型的應(yīng)用,需要的朋友可以參考下2015-02-02jquery設(shè)置元素的readonly和disabled的寫法
Jquery的api中提供了對元素應(yīng)用disabled和readonly屬性的方法,在這里記錄下,感興趣的朋友可以練練手了2013-09-09