当前位置: > 网站建设 > Flex教程 >

Flex中如何利用swatchHighlightSize样式设置ColorPicker控件加亮

时间:2012-03-27 | 栏目:Flex教程 | 点击:

接下来的例子演示了Flex中如何利用swatchHighlightSize样式,设置ColorPicker控件加亮边框粗细 尺寸。

下面是完整代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalAlign="top"
    backgroundColor="white"
    creationComplete="init();">

  <mx:Style>
    ColorPicker {
      swatchPanelStyleName: myCustomSwatchPanelStyleName;
    }

    .myCustomSwatchPanelStyleName {
      /* border */
      swatchBorderColor: white;
      swatchBorderSize: 1;
      /* highlight */
      swatchHighlightColor: red;
      swatchHighlightSize: 1;
    }
  </mx:Style>

  <mx:Script>
    <![CDATA[
      import mx.events.SliderEvent;

      private var cssObj:CSSStyleDeclaration;

      private function init():void {
        cssObj = StyleManager.getStyleDeclaration (".myCustomSwatchPanelStyleName");
        colorPicker.open();
      }

      private function borderSlider_change(evt:SliderEvent):void {
        cssObj.setStyle("swatchBorderSize", evt.value);
        colorPicker.open();
      }

      private function highlightSlider_change(evt:SliderEvent):void {
        cssObj.setStyle("swatchHighlightSize", evt.value);
        colorPicker.open();
      }
    ]]>
  </mx:Script>

  <mx:ApplicationControlBardock="true">
    <mx:FormstyleName="plain">
      <mx:FormItemlabel="swatchBorderSize:">
        <mx:HSliderid="borderSlider"
            minimum="0"
            maximum="5"
            value="1"
            liveDragging="true"
            snapInterval="1"
            tickInterval="1"
            change="borderSlider_change(event);"/>
      </mx:FormItem>
      <mx:FormItemlabel="swatchHighlightSize:">
        <mx:HSliderid="highlightSlider"
            minimum="0"
            maximum="5"
            value="1"
            liveDragging="true"
            snapInterval="1"
            tickInterval="1"
            change="highlightSlider_change(event);"/>
      </mx:FormItem>
    </mx:Form>
  </mx:ApplicationControlBar>

  <mx:ColorPickerid="colorPicker" />

</mx:Application>

您可能感兴趣的文章:

相关文章