Team:ZJU-China/JS/jquery.hrzAccordion.js

From 2014.igem.org

Revision as of 20:12, 15 October 2014 by Tzuyu (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

//# jQuery - Horizontal Accordion //# Version 2.00.00 Alpha 1 //# //# portalZINE(R) - New Media Network //# http://www.portalzine.de //# //# Alexander Graef //# portalzine@gmail.com //# //# Copyright 2007-2009

(function($) { $.hrzAccordion = {


setOnEvent: function(i, container, finalWidth, settings){ $("#"+container+"Handle"+i).bind(settings.eventTrigger,function() {

var status = $('[rel='+container+'ContainerSelected]').data('status');

if(status ==1 && settings.eventWaitForAnim === true){ return false; }

if( $("#"+container+"Handle"+i).attr("rel") != container+"HandleSelected"){

settings.eventAction;

$('[id*='+container+'Handle]').attr("rel","");

$('[id*='+container+'Handle]').attr("class",settings.handleClass);

$("#"+container+"Handle"+i).addClass(settings.handleClassSelected);


$("."+settings.contentWrapper).css({width: finalWidth+"px" });

switch(settings.closeOpenAnimation) { case 1:


if($('[rel='+container+'ContainerSelected]').get(0) ){ $('[rel='+container+'ContainerSelected]').data('status',1);

//current_width = $('[rel='+container+'ContainerSelected]').width();

$('[rel='+container+'ContainerSelected]').animate({width: "0px",opacity:"0"}, { queue:true, duration:settings.closeSpeed ,easing:settings.closeEaseAction,complete: function(){

$('[rel='+container+'ContainerSelected]').data('status',0); } ,step: function(now){ width = $(this).width();

//new_width = finalWidth- (finalWidth * (width/current_width)); new_width = finalWidth - width; $('#'+container+'Content'+i).width(Math.ceil(new_width)).css("opacity","1");

}});

}else{ $('[rel='+container+'ContainerSelected]').data('status',1);

$('#'+container+'Content'+i).animate({width: finalWidth,opacity:"1"}, { queue:false, duration:settings.closeSpeed ,easing:settings.closeEaseAction,complete: function(){ $('[rel='+container+'ContainerSelected]').data('status',0); }});


}

break; case 2: $('[id*='+container+'Content]').css({width: "0px"}); $('#'+container+'Content'+i).animate({width: finalWidth+"px",opacity:"1"}, { queue:false, duration:settings.openSpeed ,easing:settings.openEaseAction, complete:

settings.completeAction																																																									});						

break; }

$('[id*='+container+'Content]').attr("rel",""); $("#"+container+"Handle"+i).attr("rel",container+"HandleSelected"); $("#"+container+"Content"+i).attr("rel",container+"ContainerSelected");


}

}); } };

$.fn.extend({

hrzAccordionLoop: function(options) { return this.each(function(a){

var container = $(this).attr("id") || $(this).attr("class"); var elementCount = $('#'+container+' > li, .'+container+' > li').size(); var settings = $(this).data('settings');

variable_holder="interval"+container ; var i =0; var loopStatus = "start";

variable_holder = window.setInterval(function(){

$("#"+container+"Handle"+i).trigger(settings.eventTrigger);

if(loopStatus =="start"){ i = i + 1; }else{ i = i-1; }

if(i==elementCount && loopStatus == "start"){ loopStatus = "end"; i=elementCount-1;

}

if(i==0 && loopStatus == "end"){ loopStatus = "start"; i=0;

} },settings.cycleInterval);


}); }, hrzAccordion: function(options) { this.settings = { eventTrigger : "click", containerClass : "container", listItemClass : "listItem", contentContainerClass : "contentContainer", contentWrapper : "contentWrapper", contentInnerWrapper : "contentInnerWrapper", handleClass : "handle", handleClassOver : "handleOver", handleClassSelected : "handleSelected", handlePosition : "right", handlePositionArray : "", // left,left,right,right,right closeEaseAction : "swing", closeSpeed : 500, openEaseAction : "swing", openSpeed : 500, openOnLoad : 2, hashPrefix : "tab", eventAction : function(){ //add your own extra clickAction function here }, completeAction : function(){ //add your own onComplete function here }, closeOpenAnimation : 1,// 1 - open and close at the same time / 2- close all and than open next cycle : false, // not integrated yet, will allow to cycle through tabs by interval cycleInterval : 10000, fixedWidth : "", eventWaitForAnim : true

};

if(options){ $.extend(this.settings, options); } var settings = this.settings;


return this.each(function(a){

var container = $(this).attr("id") || $(this).attr("class");

$(this).data('settings', settings);

$(this).wrap("
");

var elementCount = $('#'+container+' > li, .'+container+' > li').size();

var containerWidth = $("."+settings.containerClass).width();

var handleWidth = $("."+settings.handleClass).css("width");

handleWidth = handleWidth.replace(/px/,""); var finalWidth; var handle;

if(settings.fixedWidth){ finalWidth = settings.fixedWidth; }else{ finalWidth = containerWidth-(elementCount*handleWidth)-handleWidth; }

$('#'+container+' > li, .'+container+' > li').each(function(i) {

$(this).attr('id', container+"ListItem"+i); $(this).attr('class',settings.listItemClass);

$(this).html("
" +"
" +"
"

+$(this).html()

+"
");

if($("div",this).hasClass(settings.handleClass)){

var html = $("div."+settings.handleClass,this).attr("id",""+container+"Handle"+i+"").html(); $("div."+settings.handleClass,this).remove();

handle = "
"+html+"
";

}else{

handle = "
";

}


if(settings.handlePositionArray){ splitthis = settings.handlePositionArray.split(","); settings.handlePosition = splitthis[i]; }

switch(settings.handlePosition ){ case "left": $(this).prepend( handle ); break; case "right": $(this).append( handle ); break; case "top": $("."+container+"Top").append( handle ); break; case "bottom": $("."+container+"Bottom").append( handle ); break; }

$("#"+container+"Handle"+i).bind("mouseover", function(){ $("#"+container+"Handle"+i).addClass(settings.handleClassOver); });

$("#"+container+"Handle"+i).bind("mouseout", function(){ if( $("#"+container+"Handle"+i).attr("rel") != "selected"){ $("#"+container+"Handle"+i).removeClass(settings.handleClassOver); } });


$.hrzAccordion.setOnEvent(i, container, finalWidth, settings);

if(i == elementCount-1){ $('#'+container+",."+container).show(); }


if(settings.openOnLoad !== false && i == elementCount-1){ var location_hash = location.hash; location_hash = location_hash.replace("#", ""); if(location_hash.search(settings.hashPrefix) != '-1' ){ var tab = 1; location_hash = location_hash.replace(settings.hashPrefix, ""); }

if(location_hash && tab ==1){ $("#"+container+"Handle"+(location_hash)).attr("rel",container+"HandleSelected"); $("#"+container+"Content"+(location_hash)).attr("rel",container+"ContainerSelected"); $("#"+container+"Handle"+(location_hash-1)).trigger(settings.eventTrigger);

}else{ $("#"+container+"Handle"+(settings.openOnLoad)).attr("rel",container+"HandleSelected"); $("#"+container+"Content"+(settings.openOnLoad)).attr("rel",container+"ContainerSelected"); $("#"+container+"Handle"+(settings.openOnLoad-1)).trigger(settings.eventTrigger); } } });

if(settings.cycle === true){ $(this).hrzAccordionLoop(); } }); } }); })(jQuery);