Flex中如何通过mx.controls.ProgressBarDirection类设置进度条（ProgressBar）是left-to-right还是right-to-left的例子

By Minidxer | October 15, 2008

有人吃饭用左手，有人吃饭用右手，那为什么进度条就非要从左往右呢？当然没人这样规定，接下来的例子演示了Flex中如何通过mx.controls.ProgressBarDirection类设置进度条（ProgressBar）是left-to-right还是right-to-left。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.SliderEvent;
  10.             import mx.controls.ProgressBarDirection;
  11.  
  12.             private function slider_change(evt:SliderEvent):void {
  13.                 progressBar.setProgress(slider.value, slider.maximum);
  14.             }
  15.         ]]>
  16.     </mx:Script>
  17.  
  18.     <mx:Array id="arr">
  19.         <mx:Object label="{ProgressBarDirection.LEFT}" />
  20.         <mx:Object label="{ProgressBarDirection.RIGHT}" />
  21.     </mx:Array>
  22.  
  23.     <mx:ApplicationControlBar dock="true">
  24.         <mx:Form>
  25.             <mx:FormItem label="direction:">
  26.                 <mx:ComboBox id="comboBox"
  27.                         dataProvider="{arr}"
  28.                         selectedIndex="1" />
  29.             </mx:FormItem>
  30.             <mx:FormItem label="value:"
  31.                     direction="horizontal">
  32.                 <mx:HSlider id="slider"
  33.                         minimum="0"
  34.                         maximum="100"
  35.                         liveDragging="true"
  36.                         change="slider_change(event);"
  37.                         dataTipPrecision="0"
  38.                         snapInterval="1"
  39.                         tickInterval="10" />
  40.                 <mx:Label text="{slider.value}" />
  41.             </mx:FormItem>
  42.         </mx:Form>
  43.     </mx:ApplicationControlBar>
  44.  
  45.     <mx:ProgressBar id="progressBar"
  46.             mode="manual"
  47.             direction="{comboBox.selectedItem.label}" />
  48.  
  49. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ProgressBar | Tags: , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads