backgroundColor
和
backgroundAlpha
样式学习。
示例:
代码:
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="backgroundAlpha:" >
< mx:HSlider id ="slider"
minimum ="0.0"
maximum ="1.0"
value ="1.0"
snapInterval ="0.1"
tickInterval ="0.1"
liveDragging ="true" />
</ mx:FormItem >
< mx:FormItem label ="backgroundColor:" >
< mx:ColorPicker id ="colorPicker"
selectedColor ="white" />
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:NumericStepper id ="numericStepper"
backgroundAlpha =" {slider.value} "
backgroundColor =" {colorPicker.selectedColor} " />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="backgroundAlpha:" >
< mx:HSlider id ="slider"
minimum ="0.0"
maximum ="1.0"
value ="1.0"
snapInterval ="0.1"
tickInterval ="0.1"
liveDragging ="true" />
</ mx:FormItem >
< mx:FormItem label ="backgroundColor:" >
< mx:ColorPicker id ="colorPicker"
selectedColor ="white" />
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:NumericStepper id ="numericStepper"
backgroundAlpha =" {slider.value} "
backgroundColor =" {colorPicker.selectedColor} " />
</ mx:Application >
你也可以把样式写在CSS中.
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Style >
NumericStepper {
backgroundAlpha: 0.5;
backgroundColor: red;
}
</ mx:Style >
< mx:NumericStepper id ="numericStepper" />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Style >
NumericStepper {
backgroundAlpha: 0.5;
backgroundColor: red;
}
</ mx:Style >
< mx:NumericStepper id ="numericStepper" />
</ mx:Application >
你也可以使用AS的setStyle()方法:
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
private function init():void {
numericStepper.setStyle("backgroundAlpha", 0.5);
numericStepper.setStyle("backgroundColor", "red");
}
]]>
</ mx:Script >
< mx:NumericStepper id ="numericStepper"
creationComplete ="init();" />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
private function init():void {
numericStepper.setStyle("backgroundAlpha", 0.5);
numericStepper.setStyle("backgroundColor", "red");
}
]]>
</ mx:Script >
< mx:NumericStepper id ="numericStepper"
creationComplete ="init();" />
</ mx:Application >