jquery - 进度条中的多段？

Question

我正在寻找进度条 jQuery 插件中的多段。

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

我正在寻找这样的东西：

我已经厌倦了谷歌搜索，我找不到任何支持多段支持的 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/