jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas funciones se pueden implementar mediante labiblioteca jQuery 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 toArray() para serializar las identificaciones de elementos ordenables en una array de strings.
Sintaxis:
$(".selector").sortable("toArray" );
Parámetros: este método acepta opciones de parámetros únicos que personalizan la serialización. Contiene atributos de tipo string con un «id» predeterminado que contiene el nombre del atributo que se usará para los valores.
Valores devueltos: este método devuelve una array de valores de identificación de los elementos clasificables en orden ordenado.
Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.
<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>
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
Ejemplo: El siguiente ejemplo ilustra el uso del método jQuery UI Sortable toArray() .
HTML
<!DOCTYPE html>
<html>
<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>
<title>jQuery UI Sortable toArray() Method</title>
<style>
#sortableList {
list-style-type: none;
}
.geeks {
margin: 10px;
background: lightgreen;
padding: 10px;
border: 1px solid green;
font-size: 25px;
}
</style>
<script>
$(function () {
$('#sortableList').sortable({
update: function (event, ui) {
var benefits = $(this)
.sortable('toArray').toString();
$("#sortedList").text(benefits);
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable toArray() Method</h4>
<ul id="sortableList">
<li id="Tutorials" class="geeks">
1.Free Tutorials
</li>
<li id="Articles" class="geeks">
2.Millions of articles
</li>
<li id="Webinars" class="geeks">
3.Webinars by Industry Experts
</li>
<li id="Courses" class="geeks">
4.Live, Online and Classroom Courses
</li>
</ul>
<h3>Benefits ID after sorting</h3>
<h2><span id='sortedList'></span></h2>
</center>
</body>
Producción:
Referencia: https://api.jqueryui.com/sortable/#method-toArray
Publicación traducida automáticamente
Artículo escrito por harshsethi2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA