Flex中如何控制ProgressBar控件上文本排列的例子

By Minidxer | October 5, 2008

接下来的例子演示了Flex中如何控制ProgressBar控件上文本排列。

让我们先来看一下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.             private function progressBar_creationComplete():void {
  10.                 progressBar.setStyle("labelWidth", progressBar.width);
  11.                 progressBar.setProgress(35, 100);
  12.             }
  13.  
  14.             private function comboBox_change():void {
  15.                 progressBar.labelPlacement = comboBox.selectedItem.toString();
  16.             }
  17.  
  18.             private function slider_change():void {
  19.                 progressBar.setStyle("textIndent", slider.value);
  20.             }
  21.         ]]>
  22.     </mx:Script>
  23.  
  24.     <mx:ApplicationControlBar dock="true">
  25.         <mx:Label text="textIndent:" />
  26.         <mx:HSlider id="slider"
  27.                 minimum="0"
  28.                 maximum="60"
  29.                 liveDragging="true"
  30.                 showTrackHighlight="true"
  31.                 dataTipPrecision="0"
  32.                 snapInterval="1"
  33.                 tickInterval="10"
  34.                 labels="[0,20,40,60]"
  35.                 change="slider_change();" />
  36.  
  37.         <mx:Spacer width="50" />
  38.  
  39.         <mx:Label text="labelPlacement:" />
  40.         <mx:ComboBox id="comboBox"
  41.                 selectedIndex="4"
  42.                 change="comboBox_change();">
  43.             <mx:dataProvider>
  44.                 <mx:Array>
  45.                     <mx:String>left</mx:String>
  46.                     <mx:String>center</mx:String>
  47.                     <mx:String>right</mx:String>
  48.                     <mx:String>top</mx:String>
  49.                     <mx:String>bottom</mx:String>
  50.                 </mx:Array>
  51.             </mx:dataProvider>
  52.         </mx:ComboBox>
  53.  
  54.     </mx:ApplicationControlBar>
  55.  
  56.     <mx:ProgressBar id="progressBar"
  57.             mode="manual"
  58.             label="%1 of %2 (%3%%)"
  59.             creationComplete="progressBar_creationComplete();" />
  60.  
  61. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ProgressBar | No Comments » | 408 views Tags: , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll