jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante la biblioteca jQuery JavaScript. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. Se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
El evento de inicio seleccionable de jQuery UI se usa para activarse cuando se inicia la operación de selección.
Sintaxis:
Inicialice el widget seleccionable con la función de devolución de llamada de inicio:
$( ".selector" ).selectable({
start: function( event, ui ) {}
});
Vincule un detector de eventos al evento de inicio seleccionable:
$( ".selector" ).on("selectablestart", function( event, ui ) {});
Parámetros:
- evento: Este evento se activa cuando comienza la selección.
- ui: es un objeto vacío jQuery que se usa para mantener la coherencia con otros eventos.
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”https://code.jquery. com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo:
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
h1 {
color: green;
}
#list .ui-selecting {
background: greenyellow;
}
#list .ui-selected {
color: white;
background: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Selectable start Event</h3>
<h3>GeeksforGeeks Subjects</h3>
<ul id="list">
<li>Data Structure</li>
<li>Algorithm</li>
<li>C++</li>
<li>Java</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>PHP</li>
</ul>
<div class="res"></div>
<script>
$(document).ready(function () {
$("#list").selectable();
$("#list").selectable({
start: function(event, ui) {
$(".res").html("Start Event Triggered");
},
stop: function (event, ui) {
$(".res").html("Stop Event Triggered");
}
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/selectable/#event-start