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

【code】flex_进度条样式

2015-06-08 00:46 686 查看
最近打算吧硬盘中的资料记录在博客中,有用的就当是个分享,没用的就当是个备份,还望大家不要见怪。


一共4个文件:



JinDuTiaoItem.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

<fx:Script>
<![CDATA[
import mx.skins.spark.ProgressBarSkin;
[Bindable]
[Embed(source="/assets/daihecha/46.png")]//绿色
private var barColor:Class;

[Embed(source="/assets/daihecha/45.png")]//红色
private var redBarImage:Class;

[Embed(source="/assets/daihecha/46.png")]//绿色
private var greenBarImage:Class;

override public function set data(v:Object):void{
super.data = v;
//pb.setProgress(5,10);
pb.percentHeight= 50 ;
/*
* 根据不同的状态设置样式
*/
if(v){
pb.setProgress(v.finish,v.total);
if(data.status=='出错' ){
barColor=redBarImage;
}else{
barColor=greenBarImage;
}
var num:Number = (v.finish*100/v.total);
pb.label = num.toFixed(1)  + '%';
}

}

]]>
</fx:Script>
<mx:ProgressBar id="pb" label="" width="100%" height="100%" mode="manual" labelPlacement="center"
indeterminate="false" barSkin="{barColor}"
trackSkin="com.uniware.dm.module.daihecha.ProgressBarSkinWhite"
/>
</s:GridItemRenderer>


ProgressBarSkinWhite.mxml:

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The Spark skin class for the MX ProgressBar component.

@see mx.controls.ProgressBar

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" >

<fx:Script>
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>

<!-- layer 1: fill -->
<s:Rect left="2" right="2" top="2" bottom="2" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
alpha="1" />
<s:GradientEntry color="#cedbef"
alpha="1" />

</s:LinearGradient>
</s:fill>
</s:Rect>

<!-- layer 2: border -->
<s:Rect left="2" right="2" top="2" bottom="2" >
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF"
alpha=".9" />
<s:GradientEntry color="0xFFFFFF"
alpha="0.5" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

<!-- layer 3: right edge -->
<s:Rect right="1" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.55" />
</s:fill>
</s:Rect>

</s:SparkSkin>




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  进度条 样式 flex