jQuery UI es una tecnología basada en la web y consta de widgets de GUI, efectos visuales y temas implementados mediante jQuery ,Biblioteca de JavaScript . jQuery UI es la mejor herramienta para crear interfaces de interfaz de usuario para las páginas web. También se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
En este artículo, usaremos el método jQuery UI Sortable widget() para devolver un objeto jQuery que contiene el elemento ordenable. No acepta ningún parámetro para su funcionamiento.
Sintaxis:
var widget = $( ".selector" ).sortable( "widget" );
Parámetro: Este método no acepta ningún parámetro.
Tipo de retorno: este método devuelve un valor de objeto que contiene el elemento ordenable.
Enlace 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/base/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 UI Sortable widget().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.12.1/themes/base/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>
#sortable {
list-style-type: none;
width: 50%;
}
#sortable li {
margin: 10px 0;
padding: 0.5em;
font-size: 25px;
height: 20px;
background-color: #7af760;
}
#btn1, #btn2
{
margin-left: 50px;
padding: 0.5;
font-size: 25px;
height: 50px;
width: 50%;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
var widget = $("#divID").sortable( "widget" );
document.getElementById('gfg').innerHTML +=
"No of jQuery object containing the sortable element : "
+ Object.keys(widget).length;
});
});
$(function () {
$("#sortable").sortable();
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable widget() Method</h4>
<ul id="sortable">
<li class="ui-state-default">Geeks1</li>
<li class="ui-state-default">Geeks2</li>
<li class="ui-state-default">Geeks3</li>
<li class="ui-state-default">Geeks4</li>
</ul>
<input type="button" id="btn"
value="Widget">
<h4><span id="gfg"></span></h4>
</center>
</body>
</html>
Producción:
jQuery UI Widget ordenable() Método
Referencia: https://api.jqueryui.com/sortable/#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