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 creación se usa para desenstringr cuando se crea el control deslizante.
El evento Slider create acepta dos valores que se enumeran a continuación:
- evento: Representa el evento para el control deslizante.
- ui: Es de un tipo de objeto.
Sintaxis:
Inicialice el control deslizante con la devolución de llamada de creación:
$( ".selector" ).slider({
create: function( event, ui ) {}
});
Vincula un detector de eventos al evento slidecreate:
$( ".selector" ).on(
"slidecreate",
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 creación de jQuery UI Slider.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>
jQuery UI Slider 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>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI Slider create Event</h2>
<div id="GFG"></div>
</center>
<script>
$(function () {
$("#GFG").on('slidecreate', function () {
alert('Slider has been created!');
})
$("#GFG").slider();
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#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