代码说明：
代码使用了 progress 控件，和自定义 div 两种方式实现了进度条。
非常简单，欢迎大家参考！！！
示例代码：
import win.ui;
import web.layout; //导入layout
import web.layout.behavior.windowCommand;
import console
mainForm = win.form(text="aardio工程";right=359;bottom=669;border="none")
mainForm.add()
wbLayout = web.layout( mainForm )
if( _STUDIO_INVOKED ){ //开启layout调试
import web.layout.debug;
wbLayout.attachEventHandler( web.layout.debug );
}
html = /**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>R大技术站</title>
<style type="text/css">
body{font-family: "宋体";font-size: 12px;}
/*图片样式*/
#pro{width:200px;height:10;border-radius:10px;display:inline-block;vertical-align:middle;
background-image: url(layout\progress_b.png);background-position: 4px 4px 4px 4px;background-repeat: expand stretch-middle;
foreground-image: url(layout\progress_f.png);foreground-position: 4px 4px 4px 4px;foreground-repeat: expand stretch-middle;}
/*div样式line*/
.line{width:200px;height:12px;line-height:12px;border:2px solid #4DBF7D;border-radius:8px;}
.inline{float:left;min-width:20px;height:12px;line-height:12px;background-color:#4DBF7D;overflow:hidden;border-radius:8px;}
.inline a{float:right;padding-right:5px;color:#fff;}
/*div样式line1*/
.line1{width:200px;height:13px;line-height:12px;}
.inline1{float:left;min-width:20px;width:20px;height:13px;padding-right:5px;background-color:#2187e7;border-radius:14px;}
.inline1 a{float:right;padding-right:5px;color:#fff;}
/*数值调节 */
#val{width:50px;value-changed!:
$1(input#pro):value = self:value,
$1(input#def):value = self:value,
$1(.inline)::width = self:value * 2,
$1(.inline1)::width = self:value * 2,
$(.linetext):value = self:value + "%";
}
</style>
</head>
<body>
<p>默认样式: <input id="def" type="progress" value="10"/> </p>
<p>图片样式: <input id="pro" type="progress" value="10"/></p>
<p>DIV样式: <div .line><div .inline><a .linetext></a></div></div></p>
<p>DIV样式: <div .line1><div .inline1><a .linetext></a></div><div></div></div></p>
<p>数值调节: <input #val type="number" value=10 maxvalue=100 minvalue=0 step="1" /> </p>
</body>
</html>
**/
wbLayout.html = html; //加载页面
mainForm.show()
return win.loopMessage();
|
示例样式：
