Webapp - カスタムプログレスバー

Question

Webアプリケーションでカスタムプログレスバーを実装する必要があります。私はSmartgwtを使ってアプリUIを構築しています。 プログレスバーは、（ただし、厳密に）のようになります。

プログレスバーは、動的（与えられたパラメータに応じて、赤と緑のマーク）であるべきです。

このようなプログレスバーを実装するための適切な技術は何でしょうか？ Smartgwt Composite拡張機能を使用してそれを行う必要がありますか？ JavaScriptを使用して？

ありがとうございました。

Answer 1

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関数でラップすることです。