0
我需要在我的Web应用程序中实现自定义进度条。我正在使用Smartgwt构建应用程序UI。 进度条应类似于(但不完全): Webapp - 自定义进度条
进度条应该是动态的(红色和绿色标记根据给定的参数)。
什么应该是正确的技术来实现这样的进度条?我应该使用Smartgwt Composite扩展吗?使用javascript?
谢谢。
我需要在我的Web应用程序中实现自定义进度条。我正在使用Smartgwt构建应用程序UI。 进度条应类似于(但不完全): Webapp - 自定义进度条
进度条应该是动态的(红色和绿色标记根据给定的参数)。
什么应该是正确的技术来实现这样的进度条?我应该使用Smartgwt Composite扩展吗?使用javascript?
谢谢。
你可以使用Javascript和CSS轻松完成。
我假设以下组件:
bar_container.png (481x36) - this is the empty grey background
bar_content.png (481x36) - this is the colored bar the starts with red and end with green
red_marker.png (20x36)
green_marker.png (20x36)
你需要做的是这样的:
<style>
.container {
position: absolute;
width: 481px;
height: 36px;
}
.content {
position: absolute;
left: 0px;
top: 0px;
background-image: url(bar_content.png);
clip:rect(0px, 0px, 36px, 0px); /* modify the second value to adjust width */
}
.translucent {
opacity: 0.5;
}
.marker {
position: absolute;
left: 0px; /* or where-ever it should be to fit */
top: 0px;
width: 20px;
height: 36px;
}
.red {
background-image: url(red_marker.png);
}
.green {
background-image: url(green_marker.png);
}
</style>
<div class="container">
<div class="content">
</div>
<div class="marker red">
</div>
<div class="content translucent">
</div>
<div class="marker green">
</div>
</div>
<script>
function setProgressBar(red, green) { // red and green are values between 0 and 1
document.querySelector(".content").style.clip = "rect(0px, " + (red * 481) + "px, 36px, 0px)";
document.querySelector(".translucent").style.clip = "rect(0px, " + (green * 481) + "px, 36px, 0px)";
document.querySelector(".red").style.left = (red * 481 - 10) + "px";
document.querySelector(".green").style.left = (green * 481 - 10) + "px";
}
</script>
您需要调整值。
更好的解决方案是将所有内容封装在Javascript函数中,以便可以重用。
使用smartgwt扩展解决了它。谢谢。 – user1116377 2012-02-12 12:47:08