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 filtro seleccionable de jQuery UI se usa para hacer coincidir los elementos secundarios que realizarán los seleccionados
Sintaxis:
Inicializar elemento seleccionable con opción de filtro:
$( "Selector" ).selectable({
filter: "li"
});
-
Obtener la opción de filtro:
var filter = $( "Selector" ).selectable( "option", "filter" );
-
Establezca la opción de filtro:
"$( "Selector" ).selectable( "option", "filter", "li");
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 filtro seleccionable de jQuery UI.
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", "filter");
$("#gfg").html(tolerance);
});
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Selectable filter 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 filter option">
<h3>
<span id="gfg"></span>
</h3>
</center>
<script>
$(document).ready(function() {
$("#list" ).selectable({
filter: 'li'
});
$("#list").selectable("enable");
});
</script>
</body>
</html>
Producción:
Opción de filtro seleccionable de jQuery UI
Referencia: https://api.jqueryui.com/selectable/#option-filter
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA