Question

我正在考虑使用jquery进度条，但我有两个看似不支持的要求：

将不同部分放入进度条的功能。例如，而不仅仅是：

总计100，当前50（因此填写进度条的1/2）。看起来像这样：

我希望能够展示：

总计100，当前50（从项目A分为20，从项目B分为30，从项目C分为10），其中A和B部分可以有如下不同的可视化：

显示数字的能力＆gt; 100％。我正在使用它来跟踪筹款活动，因此可能获得的收益大于目标，因此希望进度指标继续超出进度条的界限。

jquery ui进度条是否支持这些用例？是否有其他javascript插件或控件推荐用于此用例？

Answer 1

这是一种可以完成问题第一部分的方法。

工作示例：http://jsfiddle.net/Twisty/03yuc3un/

<强> HTML

<div id="progressbar"></div>
<div class="form">
  Add Funds:
  <input type="" id="funds" />
  <button id="addBtn">Add</button>
</div>

<强> CSS

.form {
  padding: 20px;
}

.ui-progressbar-value {
  float: left;
  text-align: center;
  padding-top: .25em;
}

.form input {
  width: 4em;
}

#progressbar div.ui-progressbar-value.ui-widget-header:first-of-type {
  z-index: -1;
  display: none;
}

.color-1 {
  background: #FF0000;
}

.color-2 {
  background: #FFA500;
}

.color-3 {
  background: #FFFF00;
}

.color-4 {
  background: #00FF00;
}

.color-5 {
  background: #0000FF;
}

.color-6 {
  background: #FF00FF;
}

<强>的jQuery

$(function() {
  var $pgbr = $("#progressbar").progressbar({
    value: 0,
    max: 100,
    change: function(e, ui) {
      $(this).find(".ui-progressbar-value").eq(0).css("display", "none");
    }
  });
  $("#addBtn").button().click(function(e) {
    var funds = parseInt($("#funds").val());
    var cValue = $pgbr.progressbar("value");
    var sum = cValue + funds;
    if (sum > $pgbr.progressbar("option", "max")) {
      return false;
    }
    $pgbr.progressbar("value", sum);
    if (funds) {
      var $chunk = $("<div>", {
        class: "ui-progressbar-value ui-widget-header",
        width: ((funds / $pgbr.progressbar("option", "max")) * 100) + "%"
      });
      var count = $("#progressbar .ui-progressbar-value").length;
      if (count == 0) {
        $chunk.addClass("ui-corner-left");
      }
      if (count <= 6) {
        $chunk.addClass("color-" + count);
      } else {
        $chunk.addClass("color-" + count % 6);
      }
      $chunk.html(funds);
      $pgbr.append($chunk);
    }
  });
});

正如您所看到的，没有办法自然地使用progressbar()创建部分。此示例允许我们向进度条添加金额。如果目标是100或2000，则可以在初始化期间将其设置为max。这个例子假设您将一天收集的钱添加到目标中。示例测试：第1天30美元，第2天10美元，第3天20美元。

添加资金后，会添加另一个div，其宽度设置为百分比。这有助于恰当地代表目标的价值。如果目标是100美元，宽度将是30％。如果目标是2000美元，宽度将是1.5％。

使用CSS，您可以指定特定颜色。我选择了6种颜色，并根据已添加的部分数量旋转它们。你可以用许多不同的方法来做到这一点。

现在让我们说你的伸展目标是5000美元，你的最低目标是2000美元，最初可能是max 2000。如果收集的金额超过2000美元......这里有一些后勤问题。您可以迭代每个部分并将其调整为适当的百分比。就个人而言，我认为最好缩小进度条本身的宽度，并创建一个可以跟踪盈余的第二个进度条。

随时提出问题评论。

Answer 2

这是一个纯粹的Javascript解决方案。

这是一个函数，它将段作为数字数组，总数作为数字，容器的CSS选择器（字符串）和可选的颜色数组（作为字符串）。

细分和总数是数字，而不是百分比。该函数将段转换为百分比并绘制条形。

对于您的用例，如果您有溢出，只需添加第4个段，即计算溢出（在总计中），使用不同的颜色（示例2）。

您可以使用CSS设置线段边框的样式，以便溢出在视觉上不同

$data = @mcrypt_encrypt(MCRYPT_RIJNDAEL_128, self::$key, $data, MCRYPT_MODE_CFB, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0");

$data = @mcrypt_decrypt(MCRYPT_RIJNDAEL_128, self::$key, $data, MCRYPT_MODE_CFB, "\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0");

function progress_bar(segments, total, selector, colors) {
  //if no colors default to these 3 colors
  colors = colors || 'green black red'.split(' ');

  //find the container DOM element
  var bar = document.querySelector(selector);
  for (var i = 0; i < segments.length; i++) {
    child = document.createElement('DIV');

    //compute width in percents relative to total
    var relativeW = total ? segments[i] / total * 100 : 0;
    child.innerHTML = Math.floor(relativeW);
    child.className = 'bar-segment bar-segment--' + (i + 1);
    child.style = 'float:left; height:100%; background: ' + colors[i] + '; width: ' + relativeW + '%;';
    bar.appendChild(child);
  }
}

progress_bar([20, 50, 10], 100, '.progress-demo');

progress_bar([40, 100, 20, 30], 200, '.progress-demo-2', ['green','black','red', 'yellow']);

.bar-segment{
  text-align:center;
  overflow:hidden;  
}

.bar-segment--2{
  color:white;
}

Answer 3

由于jQuery品牌的成功，很多人最终都在使用jQuery UI，即使jQuery和jQuery UI是两个完全不同的产品。虽然jQuery很棒，但jQuery UI往往有很多粗糙的边缘。 Bootstrap还涵盖了进度条，通常更易于扩展和自定义。 Check out this example of the Bootstrap progress bar, for example

如果你选择坚持使用jQuery UI，你可以扩展$.ui.progressbar，并像以下一样使用它：

pb = $( "#progressbar" ).progressbar({
    values: [30,10,20]
});

＆＃13;

$.widget("custom.progressbar", $.ui.progressbar, {

    _create: function() {

        // Constrain initial value
        this.oldValue = this.options.value = this._constrainedValue();

        this.element.attr( {
            role: "progressbar",
            "aria-valuemin": this.min
        } );

        this._addClass( "ui-progressbar", "ui-widget ui-widget-content" );
        val_bar = $( "<div><span class='progress-label'></span></div>" ).addClass("ui-progressbar-value ui-widget-header");
        
        var bar_sections = this.options.values;
        for (i in bar_sections) {
            var bar_section = val_bar.clone();
            this.element.append(bar_section.addClass('bar_' + i));
        }

        this.valueDivs = this.element.find('.ui-progressbar-value');

        this._refreshValue();
    },

    _refreshValue: function() {
        var values = this.options.values,
            percentage = this._percentage(),
            _total = this.options.values.reduce(function(a, b) {return a + b;}, 0)

        if (_total > 100) {
            this.options.max = _total;
        } else {
            this.options.max = 100;
        }

        for (index = 0; index < values.length; ++index) {
            this.options.value = values[index];
            this.valueDiv = this.valueDivs.eq(index);
            $('.progress-label', this.valueDiv).text(values[index] + '%')
            this._super();
            this.valueDiv
            .width( percentage + "%" );
        }
    },

    _values: function( newValues ) {
        this.options.values = newValues;
        this._refreshValue();
    }
});

initial_values = [30,10,20]

var pb = $( "#progressbar" ).progressbar({
	values: [30,10,20]
});

function progress(pb) {
  // var val = pb.progressbar("value") || 0;

    initial_values.map(function(x, i, ar){
        if (initial_values[i] < 100) { 
            initial_values[i] = initial_values[i] + 1;
        }
    });

    $( "#progressbar" ).progressbar({
        values: initial_values
    });

  setTimeout(progress, 100);
}
progress(pb);

＆＃13;

	body{
		font-family: "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	select {
		width: 200px;
	}

    #progressbar {
        white-space: nowrap;
        overflow:hidden;
	    border: 1px solid #dddddd;
    	
    }

    html .ui-progressbar-value {
        display: inline-block;
        
    }

    .bar_0 {
        background: #06af8f;
    }
    .bar_1 {
        background: #000;
    }
    .bar_2 {
        background: #fc4242;
    }
    .progress-label {
        display: block;
        height: 100%;
        line-height: 30px;
        vertical-align: middle;
        text-align: center;
    }
    .bar_1 .progress-label {
        color: #fff;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="progressbar"></div>

＆＃13;

Answer 4

我想你可能喜欢multiprogressbar.js

CSS

#styled{
    margin: 30px;
    width: 50%;
    font-size: 1em;
}
.green {background: green}
.black {background: black}
.red {background: red}

HTML

<div id="styled"></div>

JQuery

$('#styled').multiprogressbar({
    parts:[{value: 30, text: true, barClass: "green", textClass: "whiteText"},
            {value: 10, text: true, barClass: "black", textClass: "whiteText"},
            {value: 20, text: true, barClass: "red", textClass: "whiteText"}]
});

结果

演示JsFiddle

Answer 5

您可以使用简单的html和css实现多进度条。不需要任何插件

<div class="container">
  <h2>Stacked Progress Bars</h2>
  <p>Create a stacked progress bar by placing multiple bars into the same div with class .progress:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-40" role="progressbar">
     40%
    </div>
    <div class="progress-bar progress-bar-10" role="progressbar">
     10%
    </div>
    <div class="progress-bar progress-bar-20" role="progressbar">
     20%
    </div>
  </div>
</div>

<style>
.progress {
  height: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  transition: width .6s ease;
}
.progress-bar-40 {
  width: 40%;
  background-color: #5cb85c;
}
.progress-bar-10 {
  width: 10%;
  background-color: #f0ad4e;
}
.progress-bar-20{
  width: 20%;
  background-color: #d9534f;
 }
 </style>

检查这个小提琴 https://jsfiddle.net/zLxxmact/2/

有没有办法将jquery UI进度条划分为不同的部分以及支持＆gt; 100％？

5 个答案:

CSS

HTML

JQuery