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.
Post A Comment:
0 comments: