En esta ocasión continuamos con el elemento listview y veremos un ejemplo de como filtrar la búsqueda de la lista de opciones y procesar la opción seleccionada por el usuario con PHP y jQuery.
Código del capítulo. listview-avanzado.php ...
<?php
$mensaje = null;
if (isset($_POST["lenguaje"]))
{
$lenguaje = $_POST["lenguaje"];
$mensaje = "<h1>Bien, tu lenguaje de programación preferido es ... $lenguaje</h1>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Listview avanzado - filtro de búsqueda</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.css">
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>Listview avanzado - filtro de búsqueda</h1>
</div>
<div data-role="main">
<div class="ui-content">
<?php echo $mensaje ?>
<script>
$(function(){
$("#listview li").on("click", function(){
var lenguaje = $(this).text();
$("#lenguaje").val(lenguaje);
$("#form-listview").submit();
});
});
</script>
<p><h3>Selecciona tu lenguaje de programación preferido</h3></p>
<div>
<form method="post" id="form-listview">
<input type="hidden" id="lenguaje" name="lenguaje">
</form>
<ul id="listview" data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true">
<li><a href="#">CSS</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Ruby</a></li>
</ul>
</div>
</div>
</div>
<div data-role="footer">
<div class="ui-content">
<small>© Tutorial jQuery Mobile</small>
</div>
</div>
</div>
</body>
</html>
Tutorial completo de jQuery Mobile en Youtube
No hay comentarios:
Publicar un comentario