jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante HTML , CSS y jQuery . jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El widget jQuery UI Progressbar se usa para agregar mostrar el estado de un proceso determinado o indeterminado.
El evento jQuery UI Progressbar complete se usa para desenstringr cuando el valor de la barra de progreso alcanza el valor máximo.
Los eventos de diapositivas Slider aceptan dos valores que se enumeran a continuación:
- evento: Representa el evento para el control deslizante.
- ui: Es de un tipo de objeto. El objeto ui está vacío pero se incluye por coherencia con otros eventos.
Sintaxis:
Inicialice la barra de progreso con la devolución de llamada completa:
$( ".selector" ).progressbar({
complete: function( event, ui ) {}
});
Vincula un detector de eventos al evento Progressbarcomplete :
$( ".selector" ).on(
"progressbarcomplete",
function( event, ui ) {}
);
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery- 1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: Este ejemplo describe los usos del evento jQuery UI Progressbar complete .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> jQuery UI Progressbar complete Event </title>
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"//code.jquery.com/jquery-1.12.4.js"></script>
<script src=
"//code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
h1 {
color: green;
}
#divID {
width: 600px;
}
</style>
<script>
$(document).ready(function () {
$("#divID").progressbar({
max: 100,
value: 50
});
$("#btn").on('click', function() {
$("#divID").progressbar("value", 100);
});
$("#divID").on('progressbarcomplete', function () {
alert("Progressbar complete!");
});
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Progressbar complete Event</h3>
<div id="divID"></div>
<br><br>
<input type="button" id="btn"
value="Change Progressbar Value"
style="padding: 5px 15px;">
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/progressbar/#event-complete
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA