Plugin básico jQuery EasyUI -Progressbar (barra de progreso)

jQuery EasyUI 插件Plugin jQuery EasyUI

Reescriba los defaults por defecto mediante $.fn.progressbar.defaults.

La barra de progreso (progressbar) proporciona una retroalimentación que muestra el progreso de una operación de larga duración. El progreso puede ser actualizado para que el usuario sepa qué operación se está ejecutando actualmente.

Dependencias

  • none

Uso

Crear una barra de progreso (ProgressBar)

El componente de barra de progreso (ProgressBar) puede crearse desde marcado HTML o mediante programación. Crearlo desde marcado es más fácil: añada la clase 'easyui-progressbar' a la etiqueta <div>.

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

Crear una barra de progreso (ProgressBar) usando JavaScript.

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

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

Obtener o establecer el valor

Obtenemos el valor actual y establecemos un nuevo valor para este componente.

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

Propiedades

Nombre Tipo Descripción Valor predeterminado
width string Establece el ancho de la barra de progreso (progressbar). auto
height number La altura del componente. Esta propiedad está disponible desde la versión 1.3.2. 22
value number Valor porcentual. 0
text string Plantilla de texto que se muestra en el componente. {value}%

Eventos

Nombre Parámetros Descripción
onChange newValue,oldValue Se dispara cuando cambia el valor.
Ejemplo de código:
$('#p').progressbar({
    onChange: function(value){
        alert(value)
    }
});

Métodos

Nombre Parámetros Descripción
options none Devuelve el objeto de opciones (options).
resize width Ajusta el tamaño del componente.
Ejemplo de código:
$('#p').progressbar('resize');  // 调整进度条为初始宽度
$('#p').progressbar('resize', 350);  // 调整进度条为一个新的宽度
getValue none Devuelve el valor de progreso actual.
setValue value Establece un nuevo valor de progreso.
jQuery EasyUI 插件Plugin jQuery EasyUI Otras extensiones