jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear aplicaciones y sitios web receptivos accesibles en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio. jQuery Listview es un widget que se utiliza para crear hermosas listas. Es una vista de lista simple y receptiva que se usa para ver las listas desordenadas .
En este artículo, aprenderemos a implementar la opción filterPlaceholde r en jQuery Mobile. El filterPlaceholder es el texto que debe aparecer en el lugar de la barra de búsqueda de la opción de filtro de vista de lista.
El marcador de posición de filtro está obsoleto para la vista de lista. Entonces necesitamos usar el widget filtrable que funciona igual que la opción de filtro.
Sintaxis:
Inicialice la vista de lista con la opción filterPlaceholder especificada:
$("#items").listview({
filter:true,
});
$("#items").filterable({
filterPlaceholder:"text...",
});
Obtenga o configure la opción filterPlaceholder , después de la inicialización:
// Getter
var filterPlaceholder = $( ".selector" )
.listview( "option", "filterPlaceholder" );
// Setter
$( ".selector" ).listview( "option",
"filterPlaceholder", "Search..." );
Enlace CDN : Primero, agregue los scripts de jQuery Mobile necesarios para 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=”https://code .jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Ejemplo: el siguiente código usó la opción filterPlaceholder para jQuery mobile.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery Mobile Listview filterPlaceholder option</h3>
<ul id="items">
<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>
<script>
$("#items").listview({
filter: true
});
$("#items").filterable({
filterPlaceholder: "Search tutorials"
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/listview/#option-filterPlaceholder
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA