jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas funciones se pueden implementar mediante la biblioteca jQuery JavaScript. jQuery UI es la mejor herramienta para crear interfaces de interfaz de usuario para las páginas web. También se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
El evento de filtro filtrable de jQuery Mobile se usa para activarse después de que el widget haya realizado el filtrado en la lista de elementos secundarios. El parámetro ui contiene la lista de elementos secundarios que se procesó.
Sintaxis:
Necesitamos inicializar el widget Filterable con el filtro de una función de devolución de llamada:
$( ".selector" ).filterable({ filter: function( event, ui ) {} });
-
Vincule un detector de eventos al filterablefilter an event:
$( ".selector" ).on( "filterablefilter", function( event, ui ) {} );
Parámetros: Son los siguientes parámetros que se aceptan:
- evento: este evento se activa después de que el widget haya realizado el filtrado en la lista de niños.
- ui: este parámetro es de tipo objeto con las siguientes opciones.
- items: este parámetro es el objeto de colección jQuery que contiene los elementos sobre los que ha iterado el filtro.
Enlace 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/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code .jquery.com/jquery-1.11.0.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Ejemplo: Este ejemplo describe los usos del evento de filtro Filterable de jQuery Mobile.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src=
"http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<script>
$(document).ready(function () {
$(".items").filterable({
filter : function (event, ui) {
$(".res").html ($(".res").html ()
+ "<b>Filterable filter was triggered.</b><br>");
}
});
});
</script>
</head>
<body>
<center>
<div data-role="page" id="page1">
<div>
<h1 style = "color:green;">GeeksforGeeks</h1>
<h3>jQuery Mobile Filterable filter Event</h3>
</div>
<div role="main" class="ui-content">
<div >
<ul class="items" style="list-style-type:none;">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href="https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming
</a>
</li>
</ul>
</div>
</div>
<div class="res"></div>
</div>
</center>
</body>
</html>
Producción:
Evento de filtro filtrable de jQuery Mobile
Referencia: https://api.jquerymobile.com/filterable/#event-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