script | M. Sayeed

I was really stuck with to change the accordian each item header color, i was trying with

accordion.getHeaderAt(0).setStyle("backgroundColor","red");
accordion.getHeaderAt(1).setStyle("backgroundColor","green");

1 2	accordion.getHeaderAt(0).setStyle("backgroundColor","red"); accordion.getHeaderAt(1).setStyle("backgroundColor","green");

Thanks to Peter deHaan for the post ‘Customizing the Accordion header in Flex 3′. See the example below for the Customizing the Accordion each item header background color in Flex 3.

<!--?xml version="1.0" encoding="utf-8"?-->
<mx:application name="Accordion_getHeaderAt_setStyle_fillColors_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalalign="middle" backgroundcolor="white">
<mx:script>
[CDATA[
private function init():void {
accordion.getHeaderAt(0).setStyle("fillColors", ["red", "red"]);
accordion.getHeaderAt(1).setStyle("fillColors", ["haloOrange", "haloOrange"]);
accordion.getHeaderAt(2).setStyle("fillColors", ["yellow", "yellow"]);
accordion.getHeaderAt(3).setStyle("fillColors", ["haloGreen", "haloGreen"]);
accordion.getHeaderAt(4).setStyle("fillColors", ["haloBlue", "haloBlue"]);
}
]]>
</mx:script>
<mx:accordion id="accordion" width="300" height="200" creationcomplete="init();">
<mx:vbox label="Red"></mx:vbox>
<mx:vbox label="Orange"></mx:vbox>
<mx:vbox label="Yellow"></mx:vbox>
<mx:vbox label="Green"></mx:vbox>
<mx:vbox label="Blue"></mx:vbox>
</mx:accordion>
</mx:application>

<mx:application name="Accordion_getHeaderAt_setStyle_fillColors_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalalign="middle" backgroundcolor="white">

<mx:script>

[CDATA[

private function init():void {

accordion.getHeaderAt(0).setStyle("fillColors", ["red", "red"]);

accordion.getHeaderAt(1).setStyle("fillColors", ["haloOrange", "haloOrange"]);

accordion.getHeaderAt(2).setStyle("fillColors", ["yellow", "yellow"]);

accordion.getHeaderAt(3).setStyle("fillColors", ["haloGreen", "haloGreen"]);

accordion.getHeaderAt(4).setStyle("fillColors", ["haloBlue", "haloBlue"]);

}

]]>

</mx:script>

<mx:accordion id="accordion" width="300" height="200" creationcomplete="init();">

<mx:vbox label="Red"></mx:vbox>

<mx:vbox label="Orange"></mx:vbox>

<mx:vbox label="Yellow"></mx:vbox>

<mx:vbox label="Green"></mx:vbox>

<mx:vbox label="Blue"></mx:vbox>

</mx:accordion>

</mx:application>

Mouseover is common behavior for the images, required in any website across the pages. So it’s a good idea to keep this functionality in common script file. Simple jQuery code can make the life easier, just follow the below steps:

Step1: Add the jquery library, if not added or can be used google CDN hosted:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Step2: Add the below code within the script tag

<script language="javascript">
$(function() {
$("img.rollover").hover(
function () { 
this.src = this.src.replace("_off","_on");
},
function () { 
this.src = this.src.replace("_on","_off");
}
);
});
</script>

$(function() {

$("img.rollover").hover(

function () {

this.src = this.src.replace("_off","_on");

function () {

this.src = this.src.replace("_on","_off");

}

);

});

</script>

Step3: Add the css class ‘rollover’, in which image you want mouseover

<img src="imagename_off.gif" class="rollover"/>

1	<img src="imagename_off.gif" class="rollover"/>

Step4: Add the images ‘normal’ & ‘mouseover’ in same location, ending with ‘imagename_off.gif’ & ‘imagename_on.gif’.

M. Sayeed Expertise in Usability, User Experience Design, Information Architect & Front-End Technologies

Customizing the Accordion header background color in Flex 3

Simple image mouseover through jQuery