Flex中如何利用backgroundColor样式设置ColorPicker背景颜色的例子

By Minidxer | January 18, 2009

接下来的例子演示了Flex中如何利用backgroundColor样式，设置ColorPicker背景颜色。

让我们先来看一下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="top"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         .myColorPicker {
  9.             swatchPanelStyleName: myCustomSwatchPanelStyleName;
  10.         }
  11.  
  12.         .myCustomSwatchPanelStyleName {
  13.             backgroundColor: haloBlue;
  14.         }
  15.     </mx:Style>
  16.  
  17.     <mx:Script>
  18.         <![CDATA[
  19.             import mx.events.ColorPickerEvent;
  20.  
  21.             private function backgroundColor_change(evt:ColorPickerEvent):void {
  22.                 var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
  23.                 cssObj.setStyle("backgroundColor", evt.color);
  24.  
  25.                 colorPicker.open();
  26.             }
  27.         ]]>
  28.     </mx:Script>
  29.  
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Form styleName="plain">
  32.             <mx:FormItem label="backgroundColor:">
  33.                 <mx:ColorPicker change="backgroundColor_change(event);" />
  34.             </mx:FormItem>
  35.         </mx:Form>
  36.     </mx:ApplicationControlBar>
  37.  
  38.     <mx:ColorPicker id="colorPicker"
  39.             styleName="myColorPicker"
  40.             editable="false" />
  41.  
  42. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ColorPicker | No Comments » | 389 views Tags: , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll