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 parada seleccionable de jQuery UI se usa para activarse cuando la operación de selección dejó de funcionar.
Sintaxis:
-
Inicialice el widget seleccionable con la función de devolución de llamada de parada:
$( ".selector" ).selectable({ stop: function( event, ui ) {} }); -
Vincule un detector de eventos al evento selectablestop:
$(".selector").on("selectablestop", 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 stop 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-stop