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.
La opción jQuery UI Selectable appendTo se usa para establecer y obtener a qué elemento se debe agregar el asistente de selección.
Sintaxis:
Inicialice el elemento seleccionable con la opción appendTo:
$( ".selector" ).selectable({
appendTo: "#element"
});
-
Obtener la opción predeterminada:
var appendTo= $( "Selector" ).selectable( "option", "appendTo" );
-
Establezca la opción predeterminada:
$( "Selector" ).selectable( "option", "appendTo", "#element" );
Vínculos de CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/smoothness/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 de la opción appendTo seleccionable de jQuery Mobile.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/smoothness/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>
h1 {
color: green;
}
#list .ui-selecting {
background: greenyellow;
}
#list .ui-selected {
color: white;
background: green;
}
#Button
{
padding: 0.5;
font-size: 20px;
height: 50px;
width: 40%;
background:green;
}
</style>
<script>
$(document).ready(function() {
$("#Button").on('click', function() {
var appendTo = $("#list").selectable(
"option", "appendTo");
$("#gfg").html("Selectable are appended to: "+
appendTo);
});
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Selectable distance Option</h3>
<ul id="list" style="list-style: none">
<li>Data Structure</li>
<li>Algorithm</li>
<li>C++</li>
<li>Java</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>PHP</li>
</ul>
<input type="button"
id="Button"
value="Click">
<h3>
<span id="gfg"></span>
</h3>
</center>
<script>
$(document).ready(function() {
$("#list").selectable();
});
</script>
</body>
</html>
Producción:
Opción appendTo seleccionable de jQuery UI
Referencia: https://api.jqueryui.com/selectable/#option-appendTo
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA