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 create se usa para desenstringr cuando se crea el valor de la barra de progreso.
El evento Slider slide 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 agrega para mantener la coherencia con otros eventos.
Sintaxis:
Inicialice la barra de progreso con la devolución de llamada de creación:
$( ".selector" ).progressbar({
create: function( event, ui ) {}
});
Vincula un detector de eventos al evento progressbarcreate:
$( ".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 jQuery UI Progressbar create.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
jQuery UI Progressbar create 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;
}
#GFG {
width: 600px;
}
</style>
<script>
$(document).ready(function () {
$("#GFG").on('progressbarcreate', function () {
alert("Progressbar created!");
});
$("#GFG").progressbar({
max: 100,
value: 60
});
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Progressbar create Event</h3>
<div id="GFG"></div>
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/progressbar/#event-create
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA