进度条中的多段？

Question

我在进度条jQuery插件中寻找Multi Segments。

每个细分可以有不同的宽度和不同的背景颜色。

我正在寻找类似的东西：

我已经厌倦了谷歌搜索，我找不到任何支持多段支持的jquery进度条插件。

该插件是否存在？

Answer 1

使用jquery-ui，您可以在.ui-progressbar-value

中创建段

$( "#progressbar" ).progressbar({
  value: 0,
  create: function( event, ui ) {
      var progress=$(this);
      var progressvalue=progress.children(".ui-progressbar-value");
      progressvalue.css("overflow","hidden");
      var wrapper=$("<div>");
      wrapper.css({"width":progress.width(),"height":"100%","display":"block"});
      progressvalue.append(wrapper);         
      var segment=$("<span>");
      segment.css({"width":"20%","height":"100%","display":"block","background":"#aa0000","float":"left"});
      wrapper.append(segment);
      segment=$("<span>");
     segment.css({"width":"50%","height":"100%","display":"block","background":"#00aa00","float":"left"});
      wrapper.append(segment);
  }
});    

http://jsfiddle.net/9fDy3/