begin process at 2012 05 29 19:36:48
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Evènements

 > 

Ouverture premiere onglet accordeon


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Ouverture premiere onglet accordeon

jeudi 6 octobre 2011 à 10:40:03 | Ouverture premiere onglet accordeon

jobe06

Bonjour, c'est mon premier site en code, (d'habitude je travail sous flash), et j'aimerai que par defaut mon accordeon soir ouvert sur la premiere pages, mais incappable de savoir comment on fait, je sais meme pas qu'elle bout de code je doit vous montrer pour m'aider...

Alors voici mon .js, peut etre pourriez vous m'aider...

Code Java :
if (typeof Effect == 'undefined') 
	throw("accordion.js requires including script.aculo.us' effects.js library!");

var accordion = Class.create();
accordion.prototype = {

	//
	//  Setup the Variables
	//
	showAccordion : null,
	currentAccordion : null,
	duration : null,
	effects : [],
	animating : false,
	
	//  
	//  Initialize the accordions
	//
	initialize: function(container, options) {
	  if (!$(container)) {
	    throw(container+" doesn't exist!");
	    return false;
	  }
	  
		this.options = Object.extend({
			resizeSpeed : 4,
			classNames : {
				toggle : 'accordion_toggle',
				toggleActive : 'accordion_toggle_active',
				content : 'accordion_content'
			},
			defaultSize : {
				height : null,
				width : null
			},
			direction : 'vertical',
			onEvent : 'click'
		}, options || {});
		
		this.duration = ((11-this.options.resizeSpeed)*0.15);

		var accordions = $$('#'+container+' .'+this.options.classNames.toggle);
		accordions.each(function(accordion) {
			Event.observe(accordion, this.options.onEvent, this.activate.bind(this, accordion), false);
			if (this.options.onEvent == 'click') {
			  accordion.onclick = function() {return false;};
			}
			
			if (this.options.direction == 'horizontal') {
				var options = $H({width: '0px'});
			} else {
				var options = $H({height: '0px'});			
			}
			options.merge({display: 'none'});			
			
			this.currentAccordion = $(accordion.next(0)).setStyle(options);			
		}.bind(this));
	},
	
	//
	//  Activate an accordion
	//
	activate : function(accordion) {
		if (this.animating) {
			return false;
		}
		
		this.effects = [];
	
		this.currentAccordion = $(accordion.next(0));
		this.currentAccordion.setStyle({
			display: 'block'
		});		
		
		this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);

		if (this.options.direction == 'horizontal') {
			this.scaling = $H({
				scaleX: true,
				scaleY: false
			});
		} else {
			this.scaling = $H({
				scaleX: false,
				scaleY: true
			});			
		}
			
		if (this.currentAccordion == this.showAccordion) {
		  this.deactivate();
		} else {
		  this._handleAccordion();
		}
	},
	// 
	// Deactivate an active accordion
	//
	deactivate : function() {
		var options = $H({
		  duration: this.duration,
			scaleContent: false,
			transition: Effect.Transitions.sinoidal,
			queue: {
				position: 'end', 
				scope: 'accordionAnimation'
			},
			scaleMode: { 
				originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
				originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
			},
			afterFinish: function() {
				this.showAccordion.setStyle({
          height: 'auto',
					display: 'none'
				});				
				this.showAccordion = null;
				this.animating = false;
			}.bind(this)
		});    
    options.merge(this.scaling);

    this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
    
		new Effect.Scale(this.showAccordion, 0, options);
	},

  //
  // Handle the open/close actions of the accordion
  //
	_handleAccordion : function() {
		var options = $H({
			sync: true,
			scaleFrom: 1,
			scaleContent: false,
			transition: Effect.Transitions.sinoidal,
			scaleMode: { 
				originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
				originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
			}
		});
		options.merge(this.scaling);
		
		this.effects.push(
			new Effect.Scale(this.currentAccordion, 100, options)
		);

		if (this.showAccordion) {
			this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
			
			options = $H({
				sync: true,
				scaleContent: false,
				transition: Effect.Transitions.sinoidal
			});
			options.merge(this.scaling);
			
			this.effects.push(
				new Effect.Scale(this.showAccordion, 0, options)
			);				
		}
		
    new Effect.Parallel(this.effects, {
			duration: this.duration, 
			queue: {
				position: 'end', 
				scope: 'accordionAnimation'
			},
			beforeStart: function() {
				this.animating = true;
			}.bind(this),
			afterFinish: function() {
				if (this.showAccordion) {
					this.showAccordion.setStyle({
						display: 'none'
					});				
				}
				$(this.currentAccordion).setStyle({
				  height: 'auto'
				});
				this.showAccordion = this.currentAccordion;
				this.animating = false;
			}.bind(this)
		});
	}
}
	



Merci


Cette discussion est classée dans : false, options, accordion, currentaccordion, showaccordion


Répondre à ce message

Sujets en rapport avec ce message

Manipuler un Menu Select (combo.) [ par syndrael ] Bonjour,Je cherche un moyen pour effacer la premièer ligne d'un Menu Select (ou combo). Voici mon code mais j'ai une erreurfor (i=1;i{ ZeSelect.option Recupérer le contenu de cette liste [ par voge ] Voila j'essaye d'utiliser ce petit script : Choix Mails <!--script de déplacement d'une liste a erreur javascript [ par elanspeech ] Bonjour,g un probleme dans la fonction javascript suivante : Divers est indéfini.... je ne comprends pas.function MusiqueByCategorie( val ) { if ( v erreur javascript [ par elanspeech ] Bonjour,g un probleme dans la fonction javascript suivante : Divers est indéfini.... je ne comprends pas.function MusiqueByCategorie( val ) { if ( v Acces aux options de IE en script js [ par kenos ] Salut à tous,Je developpe un intranet et je voudrais vérifier que les utilisateurs n'ont pas modifié les options de leurs navigateurs notamment les pa updater un champs texte .... [ par synz ] un pti script me permet avec un pop-up d' updater un champs texte, par contre je voudrai que si ce champs n est pas vide , qu il ajoute le nouveau tex taille d'un input select sous Netscape [ par stefdem ] Bonjour,Dans ma page j'ai 2 select.Le premier conditionne l'affichage du deuxième.Cela fonctionne mais sous Netscape, l'apparence de ce deuxième selec Diaporama Javascript [ par Dominike ] - Dominike -Bonjour à tous !Je vous soumet un petit problème que je n'arrive pas à résoudre seul.J'ai récupéré un Javascript sympa pour créer un diapo acces au champ d un formulaire par variable [ par Poulipe ] Bonjour,je cherche mais sans resultat comment remplacer ca :if(document.contact.interet_1.checked!=false){ ++temoin;}if(document.contact.interet_2.che probleme verification champs [ par ninipe ] Bonjour a tous,Voila g un petit probleme de code en javascriptje verifie les champs d'un formaulaire par la fonction mailla verif fonctionne pour le c


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,624 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales