Vamos a crear una página que contenga pestañas haciendo uso de la última versión de jQuery UI. Para poder crear pestañas con JQuery UI deberán, como es obvio, descargar JQuery UI.
Una vez que tengan jQuery UI listo para su uso, vamos a dirigirnos a la página relacionada a los “demos” de jQuery UI para poder ver cómo quedarán las pestañas en nuestra página. Siempre es recomendable realizar esta acción pues las funcionalidades que vamos a utilizar ya se encuentran creadas y aplicadas a páginas reales y basta únicamente con reutilizarlas. Primero, debemos dirigirnos a la página donde se encuentran los demos de jQuery UI y hacer click en la opción “Tabs” la cual hace referencia a las pestañas. Luego a mano derecha, vamos a ver diferentes variedades de esta funcionalidad como por ejemplo “Sortable” (para poder mover y ordenar las pestañas), “Collapsable”, entre otras. Vamos a seleccionar la opción “Tabs at bottom” para que las pestañas aparezcan en la parte inferior. A continuación, se muestra una imagen de lo realizado:
Ahora que ya sabemos exactamente lo que queremos lograr, vamos a irnos a nuestra instalación de jQuery UI. Vamos a irnos a la siguiente ruta:
development-bundle/demos/tabs
y vamos a copiar el archivo “bottom.html” a la carpeta raíz de nuestra instalación de jQuery UI.
Una vez copiado el archivo, podemos renombrarlo si queremos y lo abriremos con un editor de texto cualquiera. Veremos que el código ya se encuentra realizado así también como el contenido de muestra. Lo único que debemos realizar es arreglar los vínculos de las hojas de estilos y scripts (pues se encuentran “rotos” debido a que movimos el archivo”) y cambiar el contenido si queremos. Vamos a arreglar los vínculos para que queden de la siguiente forma:
<link rel="stylesheet" href="/jquery_ui/development-bundle/themes/base/jquery.ui.all.css">
<script src="/jquery_ui/development-bundle/jquery-1.10.2.js"></script>
<script src="/jquery_ui/development-bundle/ui/jquery.ui.core.js"></script>
<script src="/jquery_ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="/jquery_ui/development-bundle/ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="/jquery_ui/development-bundle/demos/demos.css">
<script>
$(function() {
$( "#tabs" ).tabs();
// fix the classes
$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
.removeClass( "ui-corner-all ui-corner-top" )
.addClass( "ui-corner-bottom" );
// move the nav to the bottom
$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
});
</script>
Ahora que ya tenemos los vínculos arreglados, lo único que debemos hacer es agregar o cambiar el contenido. En esta sección se muestran los títulos de las pestañas, por lo que si queremos agregar una nueva, basta con agregar un elemento adicional a aquella lista con el nuevo título y ponerle un identificador apropiado:
<ul> <li><a href="#tabs-1">Arequipa</a></li> <li><a href="#tabs-2">Escudo</a></li> <li><a href="#tabs-3">Bandera</a></li> <li><a href="#tabs-4">Himno</a></li> </ul>
Además, debemos agregar un nuevo <div> para el contenido que aparecerá luego de agregar dicha pestaña. Aquello lo debemos realizar en la siguiente sección:
<div id="tabs-1"> <p>Arequipa es la capital y mayor ciudad del Departamento de Arequipa, es la sede del Tribunal Constitucional y la «Capital Jurídica del Perú».15 También conocida como la «Ciudad Blanca», es la segunda ciudad del Perú por población, alcanzando el año 2013 los 852 807 habitantes según proyecciones del INEI.</p> </div> <div id="tabs-2"> <p>Cuando la villa aún no había cumplido un año de ser fundada, el rey Carlos I de España la elevó a la categoría de ciudad por real cédula del 22 de diciembre de 1540, dándole escudo de armas, en el que se ve un grifo que en la mano trae una bandera, en la cual se lee la inscripción Karlos V o Del Rey,41 como describe el tradicionalista Ricardo Palma en su libro Tradiciones Peruanas, en donde se brinda una explicación del porqué de la ubicación de los componentes en el escudo basándose en lo explicado por un cronista que contaba con conocimientos en heráldica.</p> </div> <div id="tabs-3"> <p>El color carmesí de la bandera de la ciudad, ha sido objeto de discusión entre historiadores, en el año de 1940 diversas publicaciones científicas de historiadores como Francisco Mostajo y Víctor M. Barriga ratifican de manera contundemente el color carmesí del estandarte, en contraposición al color azul reconstruido por el historiador Víctor Benavente y que coincide con el color usado en las actividades deportivas por la ciudad.42 El 2 de setiembre el doctor Mostajo dirige un oficio al señor Alcalde de la Ciudad insistiendo en sus puntos de vista acerca del color del Estandarte de Arequipa, basando sus afirmaciones en el «Acta de la jura del Rey Carlos III» del 11 de agosto de 1788. El 23 de setiembre del mismo año el Padre Víctor M. Barriga a través del diario católico El Deber se publica un importante documento que contiene entre otros datos una descripción del estandarte real de Arequipa hallado en el «Acta de 3 de setiembre de 1789».</p> </div> <div id="tabs-4"> <p>El himno de la ciudad es el denominado Himno del IV Centenario, la letra del himno pertenece a Emilio Pardo del Valle y la música a Aurelio Díaz Espinoza quienes ganaron el concurso para la creación de la letra y música del himno de la ciudad convocado en 1939 por el cabildo de la ciudad. El premio se otorga en 1940 y el himno es desde entonces entonado en todos los actos cívicos realizados en la ciudad.</p> </div>
Debemos notar que los “id” se encuentran vinculados entre título y contenido, por lo que si creamos un nuevo título con un id específico, debemos asegurarnos de que el mismo id se encuentre en la sección de contenido. En este caso, he puesto contenido relacionado al departamento de Arequipa – Perú tal como se muestra en la siguiente imagen:
