首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

[2011-04] 更动进度条的样式

2012-10-09 
[2011-04] 更改进度条的样式Xml代码1.?xml version1.0 encodingutf-8?2.mx:Application xmlns:mx

[2011-04] 更改进度条的样式

Xml代码  1.<?xml version="1.0" encoding="utf-8"?>    2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    3.        layout="vertical"    4.        verticalAlign="middle"    5.        backgroundColor="white">    6.     7.    <mx:Script>    8.        <![CDATA[   9.            import mx.events.SliderEvent;   10.    11.            private function init():void {   12.                var c:Class = progressBar.getStyle("indeterminateSkin");   13.                progressBar.setStyle("barSkin", c);   14.                progressBar.setProgress(15, 100);   15.            }   16.    17.            private function progressBar_change(evt:SliderEvent):void {   18.                progressBar.setProgress(evt.value, 100);   19.            }   20.        ]]>    21.    </mx:Script>    22.     23.    <mx:ApplicationControlBar dock="true">    24.        <mx:Form styleName="plain">    25.            <mx:FormItem label="value:">    26.                <mx:HSlider id="slider"    27.                        minimum="0"    28.                        maximum="100"    29.                        value="15"    30.                        liveDragging="true"    31.                        snapInterval="1"    32.                        tickInterval="10"    33.                        dataTipPrecision="0"    34.                        change="progressBar_change(event);" />    35.            </mx:FormItem>    36.        </mx:Form>    37.    </mx:ApplicationControlBar>    38.     39.    <mx:ProgressBar id="progressBar"    40.            mode="manual"    41.            labelPlacement="center"    42.            height="50"    43.            creationComplete="init();" />    44.     45.</mx:Application>  <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"         layout="vertical"         verticalAlign="middle"         backgroundColor="white">       <mx:Script>         <![CDATA[             import mx.events.SliderEvent;               private function init():void {                 var c:Class = progressBar.getStyle("indeterminateSkin");                 progressBar.setStyle("barSkin", c);                 progressBar.setProgress(15, 100);             }               private function progressBar_change(evt:SliderEvent):void {                 progressBar.setProgress(evt.value, 100);             }         ]]>     </mx:Script>       <mx:ApplicationControlBar dock="true">         <mx:Form styleName="plain">             <mx:FormItem label="value:">                 <mx:HSlider id="slider"                         minimum="0"                         maximum="100"                         value="15"                         liveDragging="true"                         snapInterval="1"                         tickInterval="10"                         dataTipPrecision="0"                         change="progressBar_change(event);" />             </mx:FormItem>         </mx:Form>     </mx:ApplicationControlBar>       <mx:ProgressBar id="progressBar"             mode="manual"             labelPlacement="center"             height="50"             creationComplete="init();" />   </mx:Application>另外你可以将barSkin风格定义在一个.CSS文件或者<mx:Style />中,大致像下面这样: Xml代码  1.ProgressBar {    2.    barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin");    3.}  ProgressBar {     barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin"); }或者你可以在MXML中利用下面的代码设置barSkin风格:<mx:ProgressBar Xml代码  1.id="progressBar"    2.        barSkin="mx.skins.halo.ProgressIndeterminateSkin"    3.        mode="manual"    4.        labelPlacement="center"    5.        height="50" />  

热点排行