Accueil > Forum > > > > Ouverture premiere onglet accordeon
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
Livres en rapport
|
Derniers Blogs
POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|