Flex的进度条(ProgressBar)控件中如何设置进度轨迹条和标签间竖直间隔间距的例子
By Minidxer | May 6, 2008
接下来的例子演示了Flex的进度条(ProgressBar)控件中,如何通过设置verticalGap样式,来设定进度轨迹条和标签间竖直间隔间距。
让我们先来看一下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="top"
- backgroundColor="white"
- creationComplete="init();">
- <mx:Script>
- <![CDATA[
- import mx.events.SliderEvent;
- private function init():void {
- slider.value = progressBar.getStyle("verticalGap");
- }
- private function progressBar_change(evt:SliderEvent):void {
- progressBar.setStyle("verticalGap", evt.value);
- }
- ]]>
- </mx:Script>
- <mx:ApplicationControlBar dock="true">
- <mx:Form styleName="plain">
- <mx:FormItem label="verticalGap:">
- <mx:HSlider id="slider"
- minimum="0"
- maximum="20"
- value="3"
- liveDragging="true"
- snapInterval="1"
- tickInterval="1"
- change="progressBar_change(event);" />
- </mx:FormItem>
- </mx:Form>
- </mx:ApplicationControlBar>
- <mx:ProgressBar id="progressBar"
- mode="manual"
- trackColors="[red, red]"
- barColor="green"
- initialize="progressBar.setProgress(76, 100);" />
- </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer
Topics:
Flex |
No Comments » |
142 views
Tags: Flex, ProgressBar, verticalGap, 进度条