Переопределение JQuery $ ui.progressbar для изменения его ширины

Question

Через несколько часов мне удалось переопределить функцию, отвечающую за изменение ширины элемента, которая соответствует виджету индикатора выполнения , управляемому jQuery UI v1.12.1 - 2016-09-14 .

Сначала я хотел, чтобы индикатор выполнения (выполнено) полностью заполнял столбец таблицы.Однако по умолчанию виджет "ui.progressbar" записывает "100%" в ширину элемента.Однако мне нужно было, чтобы ширина была "calc(100% + 30px)".

Ниже задачи, и тогда я дам ответ на мою проблему.Я надеюсь, что это будет кому-то полезно, как и мне.

По умолчанию : пользовательский интерфейс JQuery установил 102% ширины первого div

<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, ответственная за эту запись

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) Мои ссылки: Расширение виджетов 1 или Расширение виджетов 2