flex动态加载使用css文件实例
程序员文章站
2022-04-29 19:49:35
...
1、 css_dynaset.mxml
2、 blue.css
3、 green.css
4、 red.css
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768"
creationComplete="init();">
<fx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.collections.ArrayCollection;
/*由于css文件不自动编译成.swf文件,因此每保存好一次记得就要手动编译一次*/
private function init():void{
var array:Array = new Array();
array.unshift({label:"红", selfColor:"red.swf"}); //必须以label为名
array.unshift({label:"绿", selfColor:"green.swf"});
array.unshift({label:"蓝", selfColor:"blue.swf"});
comboBoxID.dataProvider = new ArrayCollection(array);
}
private function loadStyles(styleURL:String):void{
StyleManager.loadStyleDeclarations(styleURL); //动态加载css的函数
}
]]>
</fx:Script>
<mx:ComboBox id="comboBoxID" x="500" y="50" prompt="Please select a style"
change="loadStyles(comboBoxID.selectedItem.selfColor);"/>
</s:Application>
2、 blue.css
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
/* blue.css */
s|Application{
backgroundColor: haloBlue;
}
3、 green.css
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
/* green.css */
s|Application{
backgroundColor: haloGreen;
}
4、 red.css
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
/* red.css */
s|Application{
backgroundColor: red;
}