Java Webapp-自定义Progressbar

我需要在我的web应用程序中实现一个自定义progressbar。我正在使用Smartgwt构建应用程序UI。 progressbar应类似于（但不完全相同）：

progressbar应该是动态的（根据给定参数的红色和绿色标记）

实现这种progressbar的正确技术应该是什么？我应该使用Smartgwt复合扩展吗？使用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>

.集装箱{
位置：绝对位置；
宽度：481px；
高度：36px；
}
.内容{
位置：绝对位置；
左：0px；
顶部：0px；
背景图片：url（bar_content.png）；
剪辑：rect（0px，0px，36px，0px）；/*修改第二个值以调整宽度*/
}
.半透明{
不透明度：0.5；
}
.马克{
位置：绝对位置；
左：0px；/*或任何适合的位置*/
顶部：0px；
宽度：20px；
高度：36px；
}
瑞德先生{
背景图片：url（red_marker.png）；
}
格林先生{
背景图片：url（green_marker.png）；
}
函数setProgressBar（红色，绿色）{//红色和绿色是介于0和1之间的值
document.querySelector（“.content”）.style.clip=“rect（0px）”+（红色*481）+“px，36px，0px）”；
document.querySelector（“.transparent”）.style.clip=“rect（0px）”+（绿色*481）+“px，36px，0px）”；
document.querySelector（“.red”）.style.left=（红色*481-10）+“px”；
document.querySelector（“.green”）.style.left=（绿色*481-10）+“px”；
}

您需要调整这些值

---

更好的解决方案是将所有这些都封装在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>

.集装箱{
位置：绝对位置；
宽度：481px；
高度：36px；
}
.内容{
位置：绝对位置；
左：0px；
顶部：0px；
背景图片：url（bar_content.png）；
剪辑：rect（0px，0px，36px，0px）；/*修改第二个值以调整宽度*/
}
.半透明{
不透明度：0.5；
}
.马克{
位置：绝对位置；
左：0px；/*或任何适合的位置*/
顶部：0px；
宽度：20px；
高度：36px；
}
瑞德先生{
背景图片：url（red_marker.png）；
}
格林先生{
背景图片：url（green_marker.png）；
}
函数setProgressBar（红色，绿色）{//红色和绿色是介于0和1之间的值
document.querySelector（“.content”）.style.clip=“rect（0px）”+（红色*481）+“px，36px，0px）”；
document.querySelector（“.transparent”）.style.clip=“rect（0px）”+（绿色*481）+“px，36px，0px）”；
document.querySelector（“.red”）.style.left=（红色*481-10）+“px”；
document.querySelector（“.green”）.style.left=（绿色*481-10）+“px”；
}

您需要调整这些值

---

更好的解决方案是将所有这些都封装在Javascript函数中，以便可以重用。

使用smartgwt扩展解决了这个问题。谢谢。使用smartgwt扩展解决了此问题。谢谢