Flex中如何利用swatchHighlightSize样式设置ColorPicker控件加亮边框粗细尺寸的例子

By Minidxer | January 20, 2009

接下来的例子演示了Flex中如何利用swatchHighlightSize样式，设置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.         creationComplete="init();">
  7.  
  8.     <mx:Style>
  9.         ColorPicker {
  10.             swatchPanelStyleName: myCustomSwatchPanelStyleName;
  11.         }
  12.  
  13.         .myCustomSwatchPanelStyleName {
  14.             /* border */
  15.             swatchBorderColor: white;
  16.             swatchBorderSize: 1;
  17.             /* highlight */
  18.             swatchHighlightColor: red;
  19.             swatchHighlightSize: 1;
  20.         }
  21.     </mx:Style>
  22.  
  23.     <mx:Script>
  24.         <![CDATA[
  25.             import mx.events.SliderEvent;
  26.  
  27.             private var cssObj:CSSStyleDeclaration;
  28.  
  29.             private function init():void {
  30.                 cssObj = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
  31.                 colorPicker.open();
  32.             }
  33.  
  34.             private function borderSlider_change(evt:SliderEvent):void {
  35.                 cssObj.setStyle("swatchBorderSize", evt.value);
  36.                 colorPicker.open();
  37.             }
  38.  
  39.             private function highlightSlider_change(evt:SliderEvent):void {
  40.                 cssObj.setStyle("swatchHighlightSize", evt.value);
  41.                 colorPicker.open();
  42.             }
  43.         ]]>
  44.     </mx:Script>
  45.  
  46.     <mx:ApplicationControlBar dock="true">
  47.         <mx:Form styleName="plain">
  48.             <mx:FormItem label="swatchBorderSize:">
  49.                 <mx:HSlider id="borderSlider"
  50.                         minimum="0"
  51.                         maximum="5"
  52.                         value="1"
  53.                         liveDragging="true"
  54.                         snapInterval="1"
  55.                         tickInterval="1"
  56.                         change="borderSlider_change(event);" />
  57.             </mx:FormItem>
  58.             <mx:FormItem label="swatchHighlightSize:">
  59.                 <mx:HSlider id="highlightSlider"
  60.                         minimum="0"
  61.                         maximum="5"
  62.                         value="1"
  63.                         liveDragging="true"
  64.                         snapInterval="1"
  65.                         tickInterval="1"
  66.                         change="highlightSlider_change(event);" />
  67.             </mx:FormItem>
  68.         </mx:Form>
  69.     </mx:ApplicationControlBar>
  70.  
  71.     <mx:ColorPicker id="colorPicker" />
  72.  
  73. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll