重写JQuery $ ui.progressbar以更改其宽度

Question

几个小时后，我能够覆盖由{strong> jQuery UI v1.12.1-2016管理的负责更改与progress bar widget对应的元素宽度的函数-09-14 。

首先，我希望进度条（已完成）完全填入表的列中。但是，默认情况下，"ui.progressbar"小部件在元素的宽度中写入"100%"。但是，我需要宽度为"calc(100% + 30px)"。

在问题下面，然后我将给出问题的答案。我希望它对某人有用，就像对我一样。

默认情况下：JQuery UI将第一个div的宽度设置为102％

<td class="ui-progressbar ui-widget ui-widget-content ui-progressbar-indeterminate" id="divProgress-255" role="progressbar" aria-valuemin="0">
   <div class="ui-progressbar-value ui-widget-header" style="width: 102%;">
         <div class="ui-progressbar-overlay"></div>
   </div>
 </td>

jquery-ui.js（第133467行）：负责撰写本文的JQuery UI行

this.valueDiv.toggle( this.indeterminate || value > this.min ).width( percentage.toFixed( 0 ) + "%" );

进度条图像如下

问题：如何使$ui.progressbar小部件使用"calc(percentage + increment)"设置元素的宽度，而不再用"100%"？

Answer 1

我的解决方案

1）我创建了一个_calc函数，并将_refreshValue函数覆盖如下：

$.widget("ui.progressbar", $.ui.progressbar, {
    _calc: function(percentage) {
        percentage = percentage.toFixed(0);
        return this.options.calc ? ("calc("+percentage+"% + "+this.options.calc_inc+"px)") : percentage+"%";
    },
    _refreshValue: function() {
        this._super();
        this.valueDiv.width( this._calc(this._percentage()) );
    }
});

2）我在列中配置了进度栏：

function progressBarSettings() {
    $('td[id^=divProgress]').progressbar("option", {
       calc: true,
       calc_inc: 30
    });
}

3）进度条图像如下：

4）我的参考资料： Extending widgets 1或 Extending widgets 2