javascript - 覆盖 JQuery $ui.progressbar 以更改其宽度

Question

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

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

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

默认 cenary: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