Composant Flex – CollapsibleAccordion, l'Accordion vertical et rotatif avec transitions
Voici un composant qui est assez difficile à expliquer car assez original dans sa réalisation. Ce composant se présente comme un composant Flex Accordion sauf qu'au lieu que les différentes parties soient empilées de manière horizontale, les uns au dessus des autres, les headers sont présentés avec une rotation de 90°. Alors comment le contenu est-il affiché?
Et bien une fois que vous sélectionnez votre partie de l'accordéon, celle-ci va pivoter (l'ensemble des autres headers pivotent aussi) pour arriver à une position classique. Un bouton sous forme de flèche est ensuite disponible pour remettre l'Accordion comme il l'était au départ.
Ce composant est intéressant car il permet d'avoir un look assez original tout en gardant de la place lorsque l'Accordion est refermé. Les transitions entre les états ouverts et fermés sont aussi bien réalisés et donneront du style à votre application.
Mais je vais vous laissez vous faire une idée sur ce composant Flex …
Voir un exemple d'application utilisant le CollapsibleAccordion
Articles similaires
- Composant Flex – Panel à 2 états (ouvert-fermé, Collapsible Panel)
- Composant Flex – RoloTab, Organisation de contacts par initiales
- Composant Flex – ComboBox avec pagination verticale
- Flex Navigator – Le composant Accordion Flex
- Composant Flex – TextArea qui s'adapte automatiquement à la taille du texte
Aucun trackbacks pour l'instant
Mes projets (Open Source)
Autres
10 mai 2009
Thank you very much for this cool flex.
I found a problem when double click too fast in one Collapsible accordion.
I can’t fix this.
Have you got any idea to fix that problem?
Thank you very much.
10 mai 2009
I can't really help you, i'm not the author of the component. Try going on the author's page and leaving a comment
http://www.flexsamples.com/blog/2009/02/collapsibleaccordion-cool-new-flex-component/
Fabien
6 juin 2011
The solution to this issue basically consists in don't allow the user to make a double click:
1. Try adding the following property to the CollapsibleAccordion.as class:
private var lastClickTime:Date = new Date(0);
2. Modify the method that is called when user clicks on a panel:
private function onButtonClick (event:MouseEvent):void {
if ((new Date()).time – lastClickTime.time < 700) {
return;
}
lastClickTime = new Date();
accordion.selectedChild = ((event.currentTarget as Button).data as Container);
close = !close;
dispatchEvent(new Event("openDrawerBegin"));
}
I hope this could be helpful for somebody else.