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 marcador de posición clasificable de jQuery UI . La opción de marcador de posición aplica un nombre de clase al espacio en blanco que queda cuando el elemento se arrastra a una posición diferente. El espacio en blanco se puede cubrir con algunas clases de jQuery UI.
Sintaxis: inicialice la opción de marcador de posición con cualquier clase de la siguiente manera. El valor predeterminado es falso , lo que significa ninguno.
$("#sortable").sortable({
placeholder: "ui-state-highlight",
});
-
Para obtener la opción después de la inicialización, use la siguiente sintaxis:
// Get the placeholder option var placeholderOption = $("#sortable") .sortable("option", "placeholder"); -
Para establecer la opción después de la inicialización, use la siguiente sintaxis:
// Set the placeholder option $("#sortable").sortable("option", "placeholder", "ui-state-highlight");
Vínculos de CDN : use los siguientes CDN para el proyecto jQuery UI.
<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 aplicado un color de IU resaltado a la opción de marcador de posición.
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 placeholder Option</h3>
<ul id="sortable">
<li>Data Structures</li>
<li>Algorithms</li>
<li>Competitive Programming</li>
<li>Machine Learning</li>
</ul>
</div>
</div>
<script>
$("#sortable").sortable({
placeholder: "ui-state-highlight",
});
</script>
</body>
</html>
Producción
Opción de marcador de posición clasificable de jQuery UI
Referencia: https://api.jqueryui.com/sortable/#option-placeholder
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA