【code】flex_进度条样式

最近打算吧硬盘中的资料记录在博客中,有用的就当是个分享,没用的就当是个备份,还望大家不要见怪。

一共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>





时间: 2024-10-16 13:30:40

【code】flex_进度条样式的相关文章

Android自定义进度条样式

最近在做一个widget,上面需要一个progressbar,产品经理和设计师给出来的东西是要实现一个圆角的progress和自定义的颜色,研究一小下,分享出来给大家哦. 测试于:Android4.0+ 操作步骤: 1.创建你的layout文件引用progressbar如下,标红处引用你自定的样式: <ProgressBar android:id="@+id/progressDownload" style="?android:attr/progressBarStyleH

自定义水平进度条样式:黑色虚线

布局layout中使用: 1 <ProgressBar 2 android:id="@+id/progress_bar" 3 style="?android:attr/progressBarStyleHorizontal" <!--必须设置为水平--> 4 android:progressDrawable="@drawable/myprogress" <!--此处用自定义样式--> 5 android:layout_

最简单的android自定义进度条样式

一.自定义圆形进度条样式 1.在安卓项目drawable目录下新建一个xml文件如下:<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" andro

html5中的progress兼容ie,制作进度条样式

html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条! 一.progress使用方法 progress标签很好使用,他有两个属性,value和max,value表示当前进度而max表示总进度(一般可以用100) 1 <progress value="50" max="100"></progress> 二.progress如何兼容ie浏览器 用过progress标签的肯定知道,这个标签虽然好用但是不

Html5添加时尚的圆形进度条样式的倒计时插件教程

一.使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/kinetic.js"></script> <script type="text/javascript" src="js/jq

安卓开发中的各种进度条样式

Android开发中我们经常会用到各种各样的loading,于是自己总结了常用的loading并分享出来.首先来看下具体效果图: 完整源码参见:stormzhang / CustomLoading 下面主要说下代码的关键部分: 1. Frame Loading 第一个就是在app中常见的loading效果,主要是用帧动画实现的,所谓帧动画就是一组组图片顺序播放: 下面直接看下代码实现: 首先在drawable文件夹下建立一个xml文件,内容如下: frame_loading.xml <?xml

进度条样式

<style> .u-progress { height: 25px; background: #CBCBCB; position: relative; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 4px; } .u-progress .pgbar, .u-progress .pging { display: block; width: 100

自定义Android进度条ProgressBar样式

进度条在Android应用中随处或见,都是为用户提供一个提示,用来增加用户的体验度!进度条样式多种多样,有圆形的,有条形的,有垂直方向的,也有水平方向的.Android系统也是我们提供了好几种默认的样式,今天我们来讲讲自定义样式的ProgressBar. 下面用个很小(又是很小)的例子: -------------------------xml布局-------------------------------------------- <ProgressBar android:id="@+

网站顶部显示预加载进度条preload.js

网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/preload.js"></script> <script type="text/javascript">