jQuery UI consta de widgets de GUI, efectos visuales y temas implementados mediante jQuery , biblioteca de 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 método JQuery UI seleccionable() se usa para seleccionar individualmente o grupos de elementos DOM. Puede seleccionar un elemento arrastrando un cuadro con el mouse sobre él. Si mantiene presionada la tecla CTRL, se seleccionarán varios elementos a la vez. Este método no toma ningún argumento, pero devuelve el objeto de instancia del seleccionable y se devuelve undefined si el elemento no tiene una instancia asociada. No toma ningún parámetro como argumento y devuelve instancias seleccionables.
Sintaxis:
$( ".selector" ).selectable( "instance" );
Parámetros: este método no acepta ningún argumento.
Enlaces CDN:
<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: En este ejemplo, cuando el usuario selecciona el menú de la opción de menú, las opciones se ocultan durante 2 segundos, después de eso, la opción se mostrará a los usuarios. Aquí usamos el método de instancia para recuperar el objeto del elemento seleccionable después de recuperar el objeto podemos aplicar cualquier método seleccionable como el método widget para obtener el objeto jquery del elemento seleccionado luego aplicamos algo de estilo al elemento seleccionado para observar el funcionamiento del método de instancia.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
h1 {
color: green;
}
.leave-selector {
list-style-type: none;
}
.leave-selector li {
display: inline-block;
padding: 5px;
border: 1px solid black;
}
.leave-selector .ui-selecting {
color: black;
background-color: yellow;
}
.leave-selector .ui-selected {
color: white;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1 class="selector">
GeeksforGeeks
</h1>
<strong>
jQuery UI Selectable instance() Method
</strong>
<div class="container">
<ul class="leave-selector">
<li id="select-id-1">Sun</li>
<li id="select-id-2">Mon</li>
<li id="select-id-3">Tue</li>
<li id="select-id-4">Web</li>
<li id="select-id-5">Thu</li>
<li id="select-id-6">Fri</li>
<li id="select-id-7">Sat</li>
</ul>
</div>
</center>
<script type="text/javascript">
let element = $(".leave-selector").selectable();
element.on("selectablestop", function (event, ui) {
let selectableInstance =
$(".leave-selector").selectable("instance");
selectableInstance.widget().css({ background: "pink" });
setTimeout(function () {
selectableInstance.widget().css({
background: "white"
});
}, 2000);
});
</script>
</body>
</html>
Producción:
Referencia : https://api.jqueryui.com/selectable/#method-instance
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA