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.
En este artículo, vamos a aprender la opción de elementos clasificables de jQuery UI . La opción de elementos establece qué elemento debe ordenarse.
Sintaxis : Necesitamos pasar los elementos que deben ser clasificables del hijo del elemento. En la inicialización a continuación, estamos haciendo que los elementos de la lista de elementos secundarios se puedan ordenar de la siguiente manera:
$("#sortable").sortable({
items: "> li"
});
-
Para obtener o establecer después de la inicialización, use la siguiente sintaxis:
// Get the option var itemsOption = $("#sortable").sortable("option", "items"); -
Para establecer después de la inicialización usando la siguiente sintaxis:
// Set the option $("#sortable").sortable("option", "items", "> ul > li");
Vínculos de CDN : use los siguientes CDN para su proyecto de jQuery Mobile.
<enlace rel=”hoja de estilo” 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>
Ejemplo: En el siguiente ejemplo, hemos hecho que la lista secundaria de la lista inicial se pueda ordenar usando «>ul > li» en la opción de elementos.
HTML
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div data-role="page" id="gfgpage">
<div data-role="header">
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<div data-role="main" class="ui-content">
<h3> jQuery UI Sortable items Option</h3>
<ul id="sortable">
<li>Data Structures</li>
<li>Algorithms</li>
<ul>
<li>Competitive Programming</li>
<li>Machine Learning</li>
</ul>
</ul>
</div>
</div>
<script>
$("#sortable").sortable({
placeholder: "ui-state-highlight",
items: "> ul > li"
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/sortable/#option-items
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA