Flexcomps’s Weblog

Replicating click Event on a MouseOver event in Flex Accordion

Posted by: Yogesh Puri on: October 9, 2008

The following code is solution to a problem where you need to make the accordion component’s MouseOver event to behave like a click event. The code will work only in the case if you have not given the names to the AccordionHeader explicitly. Check the solution out here

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function onMouseOver(evt:MouseEvent):void{
var strName:String = evt.target.name;
var strLen:int = String("_header").length;
if(strName.indexOf("_header") > -1){
accordion.selectedIndex = int(strName.substr(strLen,strName.length));
}
}
]]>
</mx:Script>
<mx:Panel title="Accordion Container Example" height="90%" width="90%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Select an Accordion navigator button to change the panel."/>
<mx:Accordion id="accordion" width="100%" height="100%" mouseOver="onMouseOver(event)" >
<!-- Define each panel using a VBox container. -->
<mx:VBox label="Accordion Button for Panel 1">
<mx:Label text="Accordion container panel 1"/>
</mx:VBox>
<mx:VBox label="Accordion Button for Panel 2">
<mx:Label text="Accordion container panel 2"/>
</mx:VBox>
<mx:VBox label="Accordion Button for Panel 3">
<mx:Label text="Accordion container panel 3"/>
</mx:VBox>
</mx:Accordion>
<mx:Label width="100%" color="blue"
text="Programmatically select the panel using a Button control."/>
<mx:HBox>
<mx:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/>
<mx:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>
<mx:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>
</mx:HBox>
</mx:Panel>
</mx:Application>

3 Responses to "Replicating click Event on a MouseOver event in Flex Accordion"

Thanks for your example, I been wanting to create this feature without depend on the Flexlib library, but never though it would be so easy! You make my project more possible! Flex FTW!

Hey please i have this functions :

private function onmouseOver( event :Event ) : void
{

b1.height = 100;
b1.width = 100;
}

private function onmouseOut( event :Event ) : void
{

b1.height = 7;
b1.width = 7;}

but it’s only works on boutons b1, now i have 13 boutons and i want that all butons have this mouse over and mouseout without rewriting the same fuctions to each bouton to make my apps more flexible can anyone help me please ???

thx :) and sorry for my english !!

[...] Read the original: Replicating click Event on a MouseOver event in Flex Accordion [...]

Leave a Reply

 

October 2008
M T W T F S S
« Sep   Nov »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Blog Stats

  • 94,229 hits