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