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 deselección de jQuery UI seleccionable se usa para desenstringr durante la operación de selección, en cada elemento eliminado de la selección.
Sintaxis:
-
Inicialice el widget seleccionable con la función de devolución de llamada de deselección.
$( ".selector" ).selectable({ unselecting: function( event, ui ) {} }); -
Vincule un detector de eventos al evento de deselección seleccionable.
$( ".selector" ).on( "selectableunselecting", function( event, ui ) {} );
Parámetros: este método acepta los siguientes parámetros
- evento: Este evento se activa al seleccionar los elementos.
- ui: este parámetro es un objeto jQuery que se usa para el elemento seleccionable actual que se está seleccionando.
- deseleccionar: este parámetro es del tipo elemento y es el elemento actual que se está seleccionando.
Enlace CDN : agregue los siguientes scripts de jQuery Mobile que serán 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: Este ejemplo describe los usos del evento de anulación de selección seleccionable de jQuery Mobile .
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>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Selectable unselecting Event</h3>
<h3>GeeksforGeeks Subjects</h3>
<ul id="list" style="list-style: none">
<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({
unselecting: function(event, ui) {
$(".res").html("Unselecting Event Triggered");
},
});
});
</script>
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/selectable/#event-unselecting
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA