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 de distancia seleccionable de jQuery UI se usa para establecer la tolerancia, en píxeles, cuando debe comenzar la selección. La selección no comenzará hasta que el mouse se haya arrastrado más allá de la distancia especificada.
Sintaxis:
Inicializar elemento seleccionable con opción de distancia:
$( "Selector" ).selectable({
distance: 30
});
-
Obtener la opción predeterminada:
var distance = $( "Selector" ).selectable( "option", "distance" );
-
Establezca la opción predeterminada:
$( "Selector" ).selectable( "option", "distance", 30 );
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 de distancia 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
{
margin-left: 50px;
padding: 0.5;
font-size: 20px;
height: 50px;
width: 50%;
background:green;
}
</style>
<script>
$(document).ready(function() {
$("#Button").on('click', function() {
var tolerance = $("#list").selectable(
"option", "distance");
$("#gfg").html(tolerance);
});
});
</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="Value of the distance option">
<h3>
<span id="gfg"></span>
</h3>
</center>
<script>
$(document).ready(function() {
$("#list" ).selectable({
distance: 30
});
$("#list").selectable("enable");
});
</script>
</body>
</html>
Producción:
jQuery Mobile Opción de distancia seleccionable.
Referencia: https://api.jqueryui.com/selectable/#option-distance
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA