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 inicio se usa para activar cuando el usuario comienza a deslizar el control deslizante.
El evento de inicio 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 inicio:
$( ".selector" ).slider({
start: function( event, ui ) {}
});
Vincule un detector de eventos al evento de inicio de diapositivas:
$( ".selector" ).on(
"slidestart",
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 inicio del control deslizante de jQuery UI.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>
jQuery UI Slider start 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 start Event</h2>
<div id="GFG"></div>
</center>
<script>
$(function () {
$("#GFG").slider();
$("#GFG").on('slidestart', function () {
alert('Slider Start Event Triggered!');
})
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#event-start
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA