JQuery UI se construye a partir de los complementos de interacción central de jQuery. Como un framework de alto nivel, hace la creación de e...
Como un framework de alto nivel, hace la creación de efectos y animación fácil para cada desarrollador. Ahora vamos a construir un menu con pestañas usando jQuery UI.
Preparándonos
- Primer Paso: En primer lugar, tenemos que descargar la biblioteca jQuery desde el sitio Descarga jQuery.
- Segundo Paso: Luego, podemos descargar la biblioteca jQuery UI desde Descarga jQuery UI.
- En esta página, podemos descargar módulos específicos o toda la biblioteca;
- tambien podemos seleccionar el tema de nuestro gusto
- o crear el nuestro, con una configuración de tema avanzada. Pero por ahora, seleccionaremos toda la biblioteca con el tema ui-lightness, para este ejemplo!. Observe las 3 imágenes a continuación y realize esta descarga!
[img url="https://sites.google.com/site/provasfatec/arquivos/descargando_jqueryui.png" width="600" height="600" rel="Eligiendo La Versión" src="https://sites.google.com/site/provasfatec/arquivos/descargando_jqueryui.png"/]
* Eligiendo el Tema ui-lightness:
[img url="https://sites.google.com/site/provasfatec/arquivos/descargando_jqueryui2.png" width="600" height="480" rel="Eligiendo el Tema" src="https://sites.google.com/site/provasfatec/arquivos/descargando_jqueryui2.png"/]
* Clicando en Descargar:
[img url="https://sites.google.com/site/provasfatec/arquivos/descargando_jqueryui3.png" width="600" height="480" rel="Descargando" src="https://sites.google.com/site/provasfatec/arquivos/descargando_jqueryui3.png"/]
Manos Al Código
- Primer Paso: Estando Listos para la codificación. Empecemos con la parte del código HTML. Esta parte definirá un elemento de navegación con tres pestañas, veamos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú con Pestañas</title>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#tabs1">Home</a></li>
<li><a href="#tabs2">Nuestros Libros</a></li>
<li><a href="ajax/shop.html">Shopping</a></li>
</ul>
<div id="tabs1">
<p>Contenido 1</p>
</div>
<div id="tabs2">
<p>Contenido 2</p>
</div>
</div>
</body>
</html>
- Segundo Paso: Una vez que el código HTML está listo, podemos continuar incluyendo los estilos CSS y los estilos JavaScript CSS después de la etiqueta <head>, como se muestra en el siguiente código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú con Pestañas</title>
<!--CSS jQuery UI-->
<link href="css/jquery-ui.css" rel="stylesheet" />
<!--Fin CSS jQuery UI-->
</head>
- Tercer Paso: Añadiremos JavaScript antes de cerrar la etiqueta <body>:
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(document). ready(function(){
$('#navigation').tabs();
});
</script>
</body>
- Nuestro resultado se parece a lo siguiente:
¿Cómo esto trabaja?
- Primero: la interfaz de usuario jQuery descargada contiene todo el contenido CSS del tema seleccionado (jquery-ui.css) que nos proporciona el estilo a nuestro aplicativo online. Todo lo que necesitamos hacer es incluirlo en la etiqueta <head> como lo hicimos en el segundo paso del proceso.
- Segundo: Después de CSS, incluimos jQuery y la biblioteca jQuery UI, esto lo vimos en el tercer paso de nuestro proceso. Teniendo hecho este paso conseguiremos que nuestro aplicativo consiga accesar sus controles y pueda correr tranquilamente!
- Tercero: La parte donde actuaremos para que el código JavaScript se desarrole es realmente simple:
$('#navigation').tabs();
Es importante ajustar la estructura HTML requerida. Cada hipervínculo está orientado al contenido HTML en las etiquetas <div> seleccionadas.
Para crear una relación entre ellos usaremos #id(ejemplo: href=#tabs1) en cada hipervínculo y el ID de la etiqueta <div> seleccionada que tambien será tabs1 por ejemplo.
Hay una excepción en la tercera pestaña, que carga los datos solicitados a través de AJAX. En este caso, no definimos ningún área de destino, ya que se creará automáticamente. Como puedes ver, usar el Ajax en jQuery UI es realmente fácil y cómodo.
COMMENTS