jQuery Collapse1.1.0折疊插件簡(jiǎn)單使用
本文實(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);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery遍歷select option和添加移除option的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫query遍歷select option和添加移除option的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
簡(jiǎn)單常用的幻燈片播放實(shí)現(xiàn)代碼
幻燈片自動(dòng)播放圖片是當(dāng)前網(wǎng)站比較流行的一個(gè)展示方式,這里項(xiàng)目需要,我自己做了一個(gè)簡(jiǎn)單的,就不詳細(xì)講解了,代碼很簡(jiǎn)單。直接看效果圖和代碼吧,希望對(duì)大家有所幫助2013-09-09
jquery實(shí)現(xiàn)的用戶注冊(cè)表單提示操作效果代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的用戶注冊(cè)表單提示操作效果,推薦給大家,有需要的小伙伴可以參考下。2015-08-08
jquery獲取select,option所有的value和text的實(shí)例
下面小編就為大家?guī)硪黄猨query獲取select,option所有的value和text的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
jQuery插件擴(kuò)展實(shí)例【添加回調(diào)函數(shù)】
這篇文章主要介紹了jQuery插件擴(kuò)展的方法,結(jié)合實(shí)例形式分析了jQuery插件添加回調(diào)函數(shù)與事件觸發(fā)機(jī)制的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
JQuery中使文本框獲得焦點(diǎn)的方法實(shí)例分析
這篇文章主要介紹了JQuery中使文本框獲得焦點(diǎn)的方法,實(shí)例分析了jQuery針對(duì)文本框獲得焦點(diǎn)的技巧,需要的朋友可以參考下2015-02-02
jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼,涉及jQuery基于鼠標(biāo)事件操作頁面元素動(dòng)態(tài)變換的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jquery操作復(fù)選框(checkbox)的12個(gè)小技巧總結(jié)
本篇文章主要是對(duì)jquery操作復(fù)選框(checkbox)的12個(gè)小技巧進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02

