描述进度条内不同阶段的文本 - 使用jQuery

Question

是否有调整（或可用的插件）在进度条中显示文字？本文旨在说明订单所处的阶段。另外，我想在进度条的当前值处显示call-out div。

请参阅附件图片。

或类似this progress bar

的内容

Answer 1

的 HTML

<input id="upload" type="button" value="Upload" />
<br/>
<div id="pb1">
    <div id="percent1">Order Taken | In processing | Order Shipped | order Delivered</div>

的的jQuery

$('#upload').click(function () {
    //$('#pb').progressbar();
    //$('#pb').progressbar({value:50});
    var val = 0;
    var interval = setInterval(function () {
        val++;
        $('#pb1').progressbar({
            value: val,
            change: function () {
                $('#percent1').css('display', 'block');
            },
            complete: function () {}
        });
        if (val == 100) {
            clearInterval(interval);
        }
    }, 50);
});

的 CSS

body {
    font-size:12px;
}
#pb, #pb1 {
    width:450px;
}
#percent, #percent1 {
    display:none;
    float: left;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

工作DeMO http://jsfiddle.net/cse_tushar/NvZTs/