Базовый плагин jQuery EasyUI -Progressbar — индикатор выполнения

jQuery EasyUI 插件Плагин jQuery EasyUI

Переопределите настройки по умолчанию через $.fn.progressbar.defaults.

Индикатор выполнения обеспечивает обратную связь о ходе длительных операций. Ход выполнения можно обновлять, чтобы пользователи знали, какая операция выполняется в данный момент.

Зависимости

  • none

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

Создание ProgressBar

Компонент ProgressBar можно создать из HTML-разметки или программно. Создание из разметки проще; добавьте класс 'easyui-progressbar' к тегу <div>.

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

Создание ProgressBar с помощью JavaScript.

<div id="p" style="width:400px;"></div>

$('#p').progressbar({
    value: 60
});

Получение или задание значения

Мы получаем текущее значение и задаём новое значение для этого компонента.

var value = $('#p').progressbar('getValue');
if (value < 100){
    value += Math.floor(Math.random() * 10);
    $('#p').progressbar('setValue', value);
}

Свойства

Name Type Описание Значение по умолчанию
width string Задаёт ширину индикатора выполнения. auto
height число Высота компонента. Это свойство доступно начиная с версии 1.3.2. 22
value число Значение в процентах. 0
text string Текстовый шаблон, отображаемый на компоненте. {value}%

Events

Name Parameters Описание
onChange newValue,oldValue Срабатывает при изменении значения.
Пример кода:
$('#p').progressbar({
    onChange: function(value){
        alert(value)
    }
});

Методы

Name Parameters Описание
options none Возвращает объект options.
resize width Изменяет размер компонента.
Пример кода:
$('#p').progressbar('resize');  // 调整进度条为初始宽度
$('#p').progressbar('resize', 350);  // 调整进度条为一个新的宽度
getValue none Возвращает текущее значение прогресса.
setValue value Устанавливает новое значение прогресса.
jQuery EasyUI 插件jQuery EasyUI Plugin Другие расширения