您的位置:首页 > Web前端 > CSS

Flex中如何利用backgroundDisabledColor和disabledOverlayAlpha样式,在一个容器的enabled属性为false时添加一个覆盖层

2012-10-12 16:38 691 查看
<?xml version="1.0" encoding="utf-8"?> 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

        layout="vertical" 

        verticalAlign="middle" 

        backgroundColor="white" 

        creationComplete="init();"> 

 

    <mx:Script> 

        <![CDATA[ 

            private function init():void { 

                var col:uint = panel.getStyle("backgroundColor"); 

                colorPicker.selectedColor = col; 

            } 

        ]]> 

    </mx:Script> 

 

    <mx:ApplicationControlBar dock="true"> 

        <mx:CheckBox id="checkBox" 

                label="enabled" 

                selected="true" /> 

 

        <mx:Spacer width="50%" /> 

 

        <mx:Label text="backgroundDisabledColor:" /> 

        <mx:ColorPicker id="colorPicker" /> 

 

        <mx:Spacer width="50%" /> 

 

        <mx:Label text="disabledOverlayAlpha:" /> 

        <mx:HSlider id="slider" 

                minimum="0" 

                maximum="1" 

                value="0.6" 

                liveDragging="true" 

                tickInterval="0.1" 

                showTrackHighlight="true" /> 

    </mx:ApplicationControlBar> 

 

    <mx:Panel id="panel" 

            title="Panel title" 

            status="Panel status" 

            enabled="{checkBox.selected}" 

            backgroundColor="red" 

            backgroundDisabledColor="{colorPicker.selectedColor}" 

            disabledOverlayAlpha="{slider.value}"> 

        <mx:Form> 

            <mx:FormHeading label="LOGIN" /> 

            <mx:FormItem label="Username:"> 

                <mx:TextInput id="userame" /> 

            </mx:FormItem> 

            <mx:FormItem label="Password:"> 

                <mx:TextInput id="password" 

                        displayAsPassword="true" /> 

            </mx:FormItem> 

            <mx:FormItem> 

                <mx:Button label="Login" /> 

            </mx:FormItem> 

        </mx:Form> 

    </mx:Panel> 

 

</mx:Application>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐