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

on 2009-1-23 in Flash教程 | 0 Comment
　　接下来例子演示了Flex中如何利用swatchHighlightSize样式设置ColorPickerControl控件加亮边框粗细尺寸

　　下面是完整代码

<?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.Style("swatchBorderSize", evt.value);
　　　　　　　　colorPicker.open;
　　　　　　}
　　
　　　　　　private function highlightSlider_change(evt:SliderEvent):void {
　　　　　　　　cssObj.Style("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>

Tags:  swatchirony swatchswiss swatch colorpicker

延伸阅读

最新评论

发表评论