进度条中的多段？答案

【问题标题】：Multi Segments in a progress bar?进度条中的多段？
【发布时间】：2013-06-18 21:10:37
【问题描述】：

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

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

我正在寻找这样的东西：

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

那个插件存在吗？

【问题讨论】：

标签： jquery jquery-plugins progress-bar

【解决方案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/

【讨论】：