Jquery UI (interfaz de usuario) es la biblioteca de JavaScript construida sobre la biblioteca jQuery JavaScript. Es la colección de interacciones, efectos, widgets y temas de la interfaz de usuario creados sobre la biblioteca jQuery JavaScript.
Las barras de progreso nos dicen el porcentaje de nuestra tarea completada y cuánto queda. Es un widget de GUI que crea un tipo de interacción entre el usuario y el sistema.
Hay dos tipos de barra de progreso
- barra de progreso determinada
- barra de progreso indeterminada
Sintaxis:
El método Progressbar() tiene dos formas y el uso de cada forma depende del requisito. Estos son los siguientes:-
$(selector, context).progressbar (options)
$(selector, context).progressbar ("action", params)
La siguiente tabla muestra las diferentes opciones que se pueden utilizar con este método:
| OPCIÓN | OBJETIVO |
|---|---|
| desactivado | Cuando la barra de progreso se desactiva, se establece en verdadero. Por defecto su valor es falso. |
| máximo | Valor máximo para una barra de progreso. Por defecto su valor es 100. |
| valor | Valor inicial de la barra de progreso. Por defecto su valor es 0. |
Ejemplo: A continuación se muestra la implementación del método explicado anteriormente:
<!DOCTYPE html>
<html>
<head>
<title>my progressbar</title>
<link rel="stylesheet"
type="text/css"
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script type="text/javascript"
src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style type="text/css">
.ui-widget-header {
background: gray;
border: 1px solid black;
}
</style>
<script>
$(function() {
$("#progressbar").progressbar({
value: 90
});
});
</script>
</head>
<body>
<div id="progressbar">
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kanugargng y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA