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. jQuery UI nos proporciona un control deslizante a través del widget deslizante.
El control deslizante nos ayuda a obtener un cierto valor usando un rango dado. Podemos cambiar el valor del control deslizante deslizando. El evento de parada se utiliza para activarse cuando se cambia el valor del control deslizante.
El evento de detención del control deslizante acepta dos valores que se enumeran a continuación:
- evento: Representa el evento para el control deslizante.
- ui: es de un tipo de objeto que acepta tres valores que son:
- handle: Representa el handle que se cambió. Es de tipo Elemento.
- handleIndex: Representa el índice numérico del handle que se mueve cuando se desliza el slider. Es de un valor de tipo Número.
- value: Representa el valor actual del slider. Es de un valor de tipo numérico.
Sintaxis:
Inicialice el control deslizante con la devolución de llamada de parada:
$( ".selector" ).slider({
stop: function( event, ui ) {}
});
Vincule un detector de eventos al evento de parada de diapositivas:
$( ".selector" ).on(
"slidestop",
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 el evento de parada del control deslizante de jQuery UI.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
jQuery UI Slider stop 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>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI Slider stop Event</h2>
<div id="GFG"></div>
</center>
<script>
$(function () {
$("#GFG").slider();
$("#GFG").on('slidestop', function () {
alert('Slider Stop Event Triggered!');
})
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#event-stop
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA