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 diapositiva se utiliza para desenstringr cada movimiento del mouse durante la diapositiva. El ui.value representa el valor del resultado del movimiento actual.
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 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.
- valores: representa una array de los valores actuales de un control deslizante de varios controles. Es de valor de tipo Array.
Sintaxis:
Inicialice el control deslizante con la devolución de llamada de la diapositiva:
$( ".selector" ).slider({
slide: function( event, ui ) {}
});
Vincule un detector de eventos al evento de diapositiva:
$( ".selector" ).on(
"slide",
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 diapositiva jQuery UI Slider.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
jQuery UI Slider slide 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 slide Event</h2>
<div id="GFG"></div>
</center>
<script>
$(function () {
$("#GFG").on('slide', function () {
alert('Slider Event Triggered!');
})
$("#GFG").slider();
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#event-slide
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA