Gracias a jQuery Mobile podemos crear una lista desplegable con estilos definidos y muy usable de cara al usuario. Vamos a ver cómo crear una de forma muy sencilla:

  1. El primer paso es el de siempre, debemos tener creado un proyecto o crear uno.
  2. En el archivo donde queremos mostrar nuestro listado añadiremos el código necesario para crearla. Esto incluye una label que indica al usuario lo que debe hacer y la propia lista con sus atributos y elementos.
  3. La lista con los elementos consta de 2 partes:
    • Select: Esta etiqueta es la principal para crear el listado y es donde se indican los atributos como el nombre que tendrá, el id y los eventos que podemos añadir.
    • Option: Cada opción está incluida dentro de una etiqueta “option” con un atributo “value” que indica el valor de dicha opción.

Así, el código sería el siguiente:

<head>
	<title>Listas</title>
	<!-- Incluimos los archivos de estilos y liberías jQuery -->
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
	<script src="jquery.mobile/jquery-1.7.2.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	</head>
	<body>
		<label for="lista-opciones" class="select">Elige una opción</label>
		<select name="lista" id="lista-opciones">
		   <option value="1">Opción 1</option>
		   <option value="2">Opción 2</option>
		   <option value="3">Opción 3</option>
		   <option value="4">Opción 4</option>
		</select>
	</body>

 

Con esto ya tenemos la lista desplegable creada y con buen resultado.

Ejemplo de lista desplegable

Ejemplo de lista desplegable

Además de estas propiedades, existe un gran listado con eventos incluido para poder configurar a gusto de cada uno. Éste es el enlace.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies