Latest web development tutorials

jQuery UI API - miembro de la barra de progreso (Progressbar Widget)

categoría

Los widgets (widgets)

uso

Descripción: Muestra un estado de proceso definido o indefinido.

Nueva versión: 1.6

Una barra de progreso está diseñado para mostrar el porcentaje de finalización del progreso actual. Una barra de progreso mediante CSS flexibilidad de codificación para ajustar el tamaño, el valor por defecto será modificada para acomodar el tamaño del contenedor primario.

La determinación de una barra de progreso sólo se puede utilizar en el sistema puede actualizar con precisión el estado actual del caso. La determinación de una barra de progreso no se llena de izquierda a derecha, a continuación, un bucle, regresa vacía - si no se puede calcular el estado real, utilice la barra de progreso indeterminada con el fin de proporcionar retroalimentación de los usuarios.

tematización

Un miembro de barra de progreso (Progressbar Widget) usando framework jQuery UI CSS para definir la apariencia de su estilo. Si es necesario utilizar la barra de progreso estilo especificado, puede utilizar el siguiente nombre de clase CSS:

  • ui-progressbar : el progreso del recipiente exterior. Este elemento de incertidumbre agregará una barra de progreso adicional ui-progressbar-indeterminate , clase.
    • ui-progressbar-value : Este elemento representa el progreso de la parte de relleno.
      • ui-progressbar-overlay : superposición para la visualización de la animación es barra de progreso indeterminada.

confiar

información adicional

  • La parte funcional requiere un poco de CSS, de lo contrario no funcionará. Si crea un tema personalizado, utilice el archivo CSS widget de especificado como un punto de partida.

Ejemplos

Una simple barra de progreso indeterminada jQuery UI (Indeterminado Progressbar). 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> miembro de barra de progreso (Progressbar Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Cuerpo>
 
<Div id = "progressbar"> </ div>
 
<Script>
$ ( "#progressbar") .progressbar ({
  Valor: false
});
</ Script>
 
</ Body>
</ Html>