jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas características se pueden implementar utilizando la biblioteca 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 la opción jQuery UI Sortable zIndex para definir el índice z para el elemento/ayudante mientras se ordena.
Sintaxis:
$( ".selector" ).sortable({zIndex: 9999});
-
Para configurar la opción zIndex:
$( ".selector" ).sortable( "option", "zIndex", 9999 );
-
Para obtener la opción zIndex:
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
Nota: El valor predeterminado de la opción de índice Z es 1000.
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 programa a continuación ilustrará el uso de la opción de índice z. En el programa a continuación, configuraremos la opción de índice z en 9999, y el evento de inicio se activará y mostrará la opción de índice z actual.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
#sortableList {
list-style-type: none;
}
.geeks {
margin: 10px;
background: lightgreen;
padding: 10px;
border: 1px solid green;
font-size: 25px;
}
</style>
<script>
$(function () {
$('#sortableList').sortable({
start: function (event, ui) {
$("#sortedList").html($("#sortedList").html() +
"Start event triggered when zIndex is " +
$("#sortableList").sortable(
"option", "zIndex") +
"<br>");
},
zIndex: 9999
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable zIndex option</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>
<h2><span id='sortedList'></span></h2>
</center>
</body>
Producción:
Referencia: https://api.jqueryui.com/sortable/#option-zIndex
Publicación traducida automáticamente
Artículo escrito por harshsethi2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA