Flex中利用dropShadowEnabled样式创建一个具有阴影效果TextInput的例子

By Minidxer | August 17, 2008

接下来的例子演示了Flex中如何利用dropShadowEnabled样式，创建一个具有阴影效果的TextInput。

让我们先来看一下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:ApplicationControlBar dock="true">
  8.         <mx:Grid>
  9.             <mx:GridRow>
  10.                 <!-- dropShadowEnabled -->
  11.                 <mx:GridItem>
  12.                     <mx:CheckBox id="checkBox"
  13.                             label="dropShadowEnabled:"
  14.                             selected="true"
  15.                             labelPlacement="left" />
  16.                 </mx:GridItem>
  17.  
  18.                 <!-- dropShadowColor -->
  19.                 <mx:GridItem>
  20.                     <mx:Label text="dropShadowColor:" />
  21.                     <mx:ColorPicker id="colorPicker" />
  22.                 </mx:GridItem>
  23.             </mx:GridRow>
  24.  
  25.             <mx:GridRow>
  26.                 <!-- shadowDirection -->
  27.                 <mx:GridItem>
  28.                     <mx:Label text="shadowDirection:" />
  29.                     <mx:ComboBox id="comboBox" selectedIndex="1">
  30.                         <mx:dataProvider>
  31.                             <mx:String>left</mx:String>
  32.                             <mx:String>center</mx:String>
  33.                             <mx:String>right</mx:String>
  34.                         </mx:dataProvider>
  35.                     </mx:ComboBox>
  36.                 </mx:GridItem>
  37.  
  38.                 <!-- shadowDistance -->
  39.                 <mx:GridItem>
  40.                     <mx:Label text="shadowDistance:" />
  41.                     <mx:HSlider id="slider"
  42.                             minimum="-10"
  43.                             maximum="10"
  44.                             value="2"
  45.                             liveDragging="true"
  46.                             snapInterval="1"
  47.                             tickInterval="1"
  48.                             dataTipPrecision="0" />
  49.                 </mx:GridItem>
  50.             </mx:GridRow>
  51.         </mx:Grid>
  52.     </mx:ApplicationControlBar>
  53.  
  54.     <mx:TextInput id="textInput"
  55.             dropShadowEnabled="{checkBox.selected}"
  56.             dropShadowColor="{colorPicker.selectedColor}"
  57.             shadowDirection="{comboBox.selectedItem}"
  58.             shadowDistance="{slider.value}" />
  59.  
  60. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | No Comments » | Tags: , , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll