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 de cambio de jQuery UI Progressbar se activa cuando cambia el valor de la barra de progreso.
El evento de diapositiva Slider acepta 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 de cambio.
$( ".selector" ).progressbar({
change: function( event, ui ) {}
});
Vincule un detector de eventos al evento de cambio de cambio de barra de progreso.
$( ".selector" ).on(
"progressbarchange",
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 de cambio Progressbar de jQuery UI .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
jQuery UI Progressbar change 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>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Progressbar change Event</h3>
<div id="divID"></div>
<br><br>
<input type="button" id="btn"
value="Change Value"
style="padding: 5px 15px;">
</center>
<script>
$(document).ready(function () {
$("#divID").progressbar({
value: 55
});
$("#btn").on('click', function () {
$("#divID").progressbar("value", 70);
alert("Progressbar value has been changed!");
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/progressbar/#event-change
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA