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

Categoría

Widgets

Uso

Descripción:Muestra un estado de proceso determinado o indeterminado.

Nuevo en la versión:1.6

La barra de progreso está diseñada para mostrar el porcentaje de finalización actual del progreso. La barra de progreso se ajusta de forma flexible mediante codificación CSS y, por defecto, se escala para adaptarse al tamaño del contenedor padre.

Una barra de progreso determinada solo debe usarse cuando el sistema puede actualizar con precisión el estado actual. Una barra de progreso determinada no se llena de izquierda a derecha y luego vuelve a vaciarse en un bucle; si no se puede calcular el estado real, se utiliza una barra de progreso indeterminada para proporcionar retroalimentación al usuario.

Tematización

El widget de barra de progreso (Progressbar Widget) utilizael framework CSS de jQuery UIpara definir el estilo de su apariencia y sensación. Si necesita utilizar estilos específicos de la barra de progreso, puede usar los siguientes nombres de clase CSS:

  • ui-progressbar: el contenedor exterior de la barra de progreso. Este elemento añade además una clase para la barra de progreso indeterminada.ui-progressbar-indeterminate class.
    • ui-progressbar-value: este elemento representa la parte de relleno de la barra de progreso.
      • ui-progressbar-overlay: la capa de superposición utilizada para mostrar la animación de la barra de progreso indeterminada.

Dependencias

Notas adicionales

  • Este widget requiere algo de CSS funcional; de lo contrario, no funcionará. Si crea un tema personalizado, utilice el archivo CSS específico del widget como punto de partida.

Ejemplos

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>进度条部件（Progressbar Widget）演示</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>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: false
});
</script>
 
</body>
</html>

Otras extensiones