jQuery UI consiste en widgets GUI, efectos visuales y temas implementados usando 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.
En este artículo, utilizaremos el método jQuery Mobile Selectable widget() para devolver un objeto jQuery que contenga el elemento seleccionable. No acepta ningún parámetro para su funcionamiento.
Sintaxis:
var widget = $( ".selector" ).selectable( "widget" );
Parámetros: este método no acepta ningún argumento.
Vínculos de CDN: Se necesitarán los siguientes scripts de jQuery Mobile para su proyecto, por lo que debemos agregar estos scripts a 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 método jQuery Mobile Selectable widget() .
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>
<script>
$(function () {
$("#btn").on('click', function () {
var widget = $("#divID").selectable( "widget" );
document.getElementById('gfg').innerHTML +=
"No of jQuery object containing the selectable element : "
+ Object.keys(widget).length;
console.log(widget);
});
});
$(document).ready(function () {
$("#list").selectable();
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Selectable widget() Method</h3>
<h3>GeeksforGeeks Subjects</h3>
<ul id="list">
<li>Data Structure</li>
<li>Algorithm</li>
<li>C++</li>
<li>Java</li>
<li>HTML</li>
</ul>
<input type="button" id="btn"
value="Widget">
<h4><span id="gfg"></span></h4>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/selectable/#method-widget
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA