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 tolerancia seleccionable de jQuery UI se usa para determinar qué modo usar para probar si el lazo debe seleccionar un elemento. El lazo puede hacer referencia al elemento que se va a seleccionar arrastrando el cuadro. Es de tipo string y su valor predeterminado es «toque».
Los siguientes son los valores posibles:
- fit : especifica cuándo el lazo se superpone al elemento por completo.
- toque : especifica cuándo el lazo se superpone al elemento en una cantidad específica.
Sintaxis:
Inicializar elemento seleccionable con opción de tolerancia:
$( "Selector" ).selectable({ tolerance: "fit" });
- Obtener la opción predeterminada:
var tolerance = $( "Selector" ).selectable( "option", "tolerance" );
- Establezca la opción predeterminada:
$( "Selector" ).selectable( "option", "tolerance", "fit" );
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 tolerancia 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;
}
</style>
<script>
$(document).ready(function() {
$("#Button").on('click', function() {
var tolerance = $("#list").selectable(
"option", "tolerance");
$("#gfg").html(tolerance);
});
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Selectable tolerance 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 tolerance option">
<h4>
<span id="gfg"></span>
</h4>
</center>
<script>
$(document).ready(function() {
$("#list").selectable();
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/selectable/#option-tolerance
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA