Flex中如何设置进度条(ProgressBar)的自定义皮肤(Skin)的例子
2009-11-11 13:32
751 查看
下面的例子演示了Flex中如何通过设置
ProgressBar {
barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin");
}
<mx:ProgressBar id="progressBar"
barSkin="mx.skins.halo.ProgressIndeterminateSkin"
mode="manual"
labelPlacement="center"
height="50" />
[/code]
barSkin风格,设定进度条(ProgressBar)的自定义皮肤(Skin)。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码
):
下面是完整代码: Download: main.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.SliderEvent; private function init():void { var c:Class = progressBar.getStyle("indeterminateSkin"); progressBar.setStyle("barSkin", c); progressBar.setProgress(15, 100); } private function progressBar_change(evt:SliderEvent):void { progressBar.setProgress(evt.value, 100); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="value:"> <mx:HSlider id="slider" minimum="0" maximum="100" value="15" liveDragging="true" snapInterval="1" tickInterval="10" dataTipPrecision="0" change="progressBar_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:ProgressBar id="progressBar" mode="manual" labelPlacement="center" height="50" creationComplete="init();" /> </mx:Application> [code]另外你可以将barSkin风格定义在一个.CSS文件或者<mx:Style />中,大致像下面这样:
ProgressBar {
barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin");
}
或者你可以在MXML中利用下面的代码设置[code]barSkin风格:[/code]
<mx:ProgressBar id="progressBar"
barSkin="mx.skins.halo.ProgressIndeterminateSkin"
mode="manual"
labelPlacement="center"
height="50" />
[/code]
相关文章推荐
- Flex中如何设置进度条(ProgressBar)边框颜色的例子
- Flex的进度条(ProgressBar)控件中如何设置进度轨迹条和标签间竖直间隔间距的例子
- Flex中如何通过downArrowSkin和upArrowSkin样式设置NumericStepper控件的上下箭头Skin的例子
- Flex中如何通过设置fontFamily样式在ComboBox控件中使用自定义嵌入字体的例子
- Flex中如何通过设置toolTipField属性在ButtonBar控件中设定自定义tool tip的例子
- Flex中如何通过设置trackSkin为null将List控件中的滚动条轨道皮肤(track skin)去除的例子
- VC++界面编程之--自定义进度条(CProgressBar)皮肤
- Flex中如何给depthColors样式设置一个颜色数组给树Tree控件不同层设置不同颜色的例子
- Flex中如何通过leading样式在一个text控件中设置文本铅框(text leading)的例子
- Flex中如何通过给openItems属性设置一个XMLList或Array对象来打开Tree的一个节点的例子
- Flex中如何通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式给Accordion头部设置一个分割用图标的例子
- Flex中如何通过selectionColor和selectionDisabledColor样式设置DataGrid的行选中与无效时颜色的例子
- flex中如何设置Alert背景图片的例子
- Flex中如何通过mode属性设置进度条ProgressBar动画状态的例子
- Flex中如何通过设置selectedDate属性设定DateChooser控件中被选择日期的例子
- Flex中如何设置或取消DateChooser控件当前日期高亮显示(highlighting)的例子
- Flex的Accordion控件中如何通过设置openDuration样式设定打开/切换的时间长短的例子
- Flex中如何通过borderStyle和borderSides样式设置NumericStepper控件特定边框(上下左右边)的例子
- Flex中如何通过errorString属性在CheckBox控件上设置一个错误信息显示字符串的例子
- Flex中如何通过设置tickLength样式设定HSlider控件上一个标记号(tick)长度的例子