Flex中如何利用swatchBorderSize样式设置ColorPicker颜色样本框粗细尺寸的例子

By Minidxer | January 20, 2009

接下来的例子演示了Flex中如何利用swatchBorderSize样式,设置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.         ColorPicker {
  9.             swatchPanelStyleName: myCustomSwatchPanelStyleName;
  10.         }
  11.  
  12.         .myCustomSwatchPanelStyleName {
  13.             swatchBorderSize: 1;
  14.         }
  15.     </mx:Style>
  16.  
  17.     <mx:Script>
  18.         <![CDATA[
  19.             import mx.events.SliderEvent;
  20.  
  21.             private function slider_change(evt:SliderEvent):void {
  22.                 var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
  23.                 cssObj.setStyle("swatchBorderSize", evt.value);
  24.  
  25.                 colorPicker.open();
  26.             }
  27.         ]]>
  28.     </mx:Script>
  29.  
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Form styleName="plain">
  32.             <mx:FormItem label="swatchBorderSize:">
  33.                 <mx:HSlider id="slider"
  34.                         minimum="0"
  35.                         maximum="5"
  36.                         value="1"
  37.                         liveDragging="true"
  38.                         snapInterval="1"
  39.                         tickInterval="1"
  40.                         change="slider_change(event);" />
  41.             </mx:FormItem>
  42.         </mx:Form>
  43.     </mx:ApplicationControlBar>
  44.  
  45.     <mx:ColorPicker id="colorPicker" />
  46.  
  47. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

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

Search Posts