Документация для разработчиков
Темная тема

API

заголовок блока табов

Подключение и использование

Подключение на PHP-странице

\Bitrix\Main\UI\Extension::load("ui.progressbar");

Использование

Метод getContainer() возвращает верстку прогресс-бара.

var myProgress = new BX.UI.ProgressBar({ 
    /*[options]*/ 
});

myProgress.getContainer()

Размер

size определяет размер прогрессбара.

var myProgress = new BX.UI.ProgressBar({ 
    size: BX.UI.ProgressBar.Size.LARGE
});

//------------

myProgress.getContainer()

Возможные значения:

BX.UI.ProgressBar.Size.LARGE
BX.UI.ProgressBar.Size.MEDIUM //Default

Цвет

color Определяет цвет прогресс бара.

var myProgress = new BX.UI.ProgressBar({ 
    color: BX.UI.ProgressBar.Color.PRIMARY
});

//------------

myProgress.setColor(BX.UI.ProgressBar.Color.SUCCESS);

Возможные значения:

BX.UI.ProgressBar.Color.PRIMARY //Default
BX.UI.ProgressBar.Color.SUCCESS
BX.UI.ProgressBar.Color.WARNING
BX.UI.ProgressBar.Color.DANGER

Фон

fill {boolean} добавляет фон. Цвет фона зависит от модификатора цвета указанного для бара. По умолчанию false.

BX.UI.ProgressBar({ 
    fill: true
});

Счетчик прогресса

Счетчик прогрессса может принимать любые значения {number}.

maxValue {number} - определяет максимальное значение прогресс-бара. (по умолчанию: 100)

value {number} - текущее значение прогрессбара. (по умолчанию: 0)

statusType - определяет как отображать прогрес:

BX.UI.ProgressBar.Status.PERCENT //Default. Отображать прогрес в %.
BX.UI.ProgressBar.Status.COUNTER //Отображать прогрес счетчиком

Пример на процентах:

var myProgress = new BX.UI.ProgressBar({ 
    maxValue: 2000,
    value: 500,
    statusType: BX.UI.ProgressBar.Status.PERCENT
});

//------------

myProgress.setValue(500);
25%

Пример на счетчике:

var myProgress = new BX.UI.ProgressBar({ 
    maxValue: 2000,
    value: 500,
    statusType: BX.UI.ProgressBar.Status.COUNTER
});

//------------

myProgress.setValue(500);
500 из 2000

Обновление счетчика

Для обновления счетчика используется метод update. Он принимает текущее значение прогресса (value) и высчитывает прогресс. После этого он изменяет счетчик и сам прогресс-бар.

myProgress.update(500);

Дополнительный текст

Текст можно поставить "до" или "после" прогресс-бара.

textBefore {string} - устанавливает текст перед прогресс-баром;

textAfter {string} - устанавливает текст после прогресс-бара.

var myProgress = new BX.UI.ProgressBar({ 
    textBefore: "Выполняется удаление",
    textAfter: "А может и не выполняется"
});

//------------

myProgress.setTextBefore("Выполняется удаление");
myProgress.setTextAfter("А может и не выполняется");
Выполняется удаление
А может и не выполняется

В колонку

column {boolean} - показывать элементы прогресс-бара в столбик. (по умолчанию: false)

var myProgress = new BX.UI.ProgressBar({ 
    column: true
});
25%
Выполняется удаление


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
Денис Перцев
для инициализации прогресс-бара на страницы его можно добавлять к какому либо элементу, например:
Код
var myProgress = new BX.UI.ProgressBar({ 
   maxValue: MAX_VALUE,
   value:VALUE,
   statusType: BX.UI.ProgressBar.Status.COUNTER
});
myProgress.update(page);
$("div#bar").html(myProgress.getContainer());
© «Битрикс», 2001-2020, «1С-Битрикс», 2020
Наверх