描述進度條內不同階段的文本 - 使用jQuery

Question

是否存在用於在進度條內顯示文本的調整（或可用插件）？本文旨在說明訂單處於什麼階段。另外，我想在進度條的當前值處顯示調出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; 
} 

工作演示http://jsfiddle.net/cse_tushar/NvZTs/