Flex中如何利用backgroundDisabledColor和disabledOverlayAlpha样式在一个容器的enabled属性为false时添加一个覆盖层的例子

By Minidxer | September 21, 2008

接下来的例子演示了Flex中如何利用backgroundDisabledColor和disabledOverlayAlpha样式，在一个容器的enabled属性为false时添加一个覆盖层。

让我们先来看一下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.         creationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             private function init():void {
  11.                 var col:uint = panel.getStyle("backgroundColor");
  12.                 colorPicker.selectedColor = col;
  13.             }
  14.         ]]>
  15.     </mx:Script>
  16.  
  17.     <mx:ApplicationControlBar dock="true">
  18.         <mx:CheckBox id="checkBox"
  19.                 label="enabled"
  20.                 selected="true" />
  21.  
  22.         <mx:Spacer width="50%" />
  23.  
  24.         <mx:Label text="backgroundDisabledColor:" />
  25.         <mx:ColorPicker id="colorPicker" />
  26.  
  27.         <mx:Spacer width="50%" />
  28.  
  29.         <mx:Label text="disabledOverlayAlpha:" />
  30.         <mx:HSlider id="slider"
  31.                 minimum="0"
  32.                 maximum="1"
  33.                 value="0.6"
  34.                 liveDragging="true"
  35.                 tickInterval="0.1"
  36.                 showTrackHighlight="true" />
  37.     </mx:ApplicationControlBar>
  38.  
  39.     <mx:Panel id="panel"
  40.             title="Panel title"
  41.             status="Panel status"
  42.             enabled="{checkBox.selected}"
  43.             backgroundColor="red"
  44.             backgroundDisabledColor="{colorPicker.selectedColor}"
  45.             disabledOverlayAlpha="{slider.value}">
  46.         <mx:Form>
  47.             <mx:FormHeading label="LOGIN" />
  48.             <mx:FormItem label="Username:">
  49.                 <mx:TextInput id="userame" />
  50.             </mx:FormItem>
  51.             <mx:FormItem label="Password:">
  52.                 <mx:TextInput id="password"
  53.                         displayAsPassword="true" />
  54.             </mx:FormItem>
  55.             <mx:FormItem>
  56.                 <mx:Button label="Login" />
  57.             </mx:FormItem>
  58.         </mx:Form>
  59.     </mx:Panel>
  60.  
  61. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads