Tabs (pestañas) en jQuery
jQuery permite el uso de pestañas de información en nuestras aplicaciones web. Este recurso es muy utilizado en el software de gestión en general. Para poder hacer uso de esta característica necesitaremos incluir las librerias auxiliares de jquery ui.core.js y ui.tabs.js. (ambas se pueden sustituir por la librería global jquery-ui.js).
Se ejecuta sobre un elemento del dom de la siguiente manera:
$("#divObjetivo).tabs({options})
Dentro del divObjetivo debemos crear una lista (ul), donde cada elemento (li) deberá contener una etiqueta de enlace (a) donde se referencie un ancla (#) al contenido de cada una. El contenido de cada etiqueta sera un elemento con el identificador especificado en los enlaces de cada uno de los elementos de la lista. Recordar que para el uso de las pestañas necesitaremos cargar un tema de jQuery.
En el siguiente ejemplo, mostraremos una web que contendrá tres pestañas, una con un resumen de libro Fundación, otra con información sobre su autor Isaac Asimov y una última con una imagen de la portad del libro. Podremos navegar entre las diferentes pestañas y pulsando sobre el boton “mostrar foto” iremos directamente a la portada del libro (usando la opción “select” y el número de la pestaña).
<html>
<head>
<link type="text/css" href="verde/verde.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.tabs.js"></script>
<script type="text/javascript">
var tabs;
$(document).ready(function(){
// inicializamos las pestañas
tabs = $("#tabs").tabs();
});
function mostrarFoto()
{
//seleccionamos una pestaña por código.
tabs.tabs('select', 2);
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#resumen"><span>Resumen</span></a></li>
<li><a href="#autor"><span>Autor</span></a></li>
<li><a href="#foto"><span>Foto</span></a></li>
</ul>
<div id="resumen">
<b>FUNDACION</b>
<br><br>
Fundacion es el primer libro de la Primera Trilogia
de la Fundacion escrita por Isaac Asimov (o el Ciclo
de Trantor como tambien se le denomina). Es una
coleccion de 5 relatos cortos que se publicaron
por primera vez en un libro de forma conjunta por
Gnome Press en 1951. 4 de las historias fueron
publicadas originalmente en la revista Astounding,
dirigida por John Campbell entre 1942 y 1944. El nombre
que se le dio a las historias fue diferente a los que
tienen en el libro. La quinta historia se incluyo cuando se
recopilaron en forma de libro.
</div>
<div id="autor">
<b>ISAAC ASIMOV</b>
<br><br>
Isaac Asimov (Isaak Ozimov). (2 de enero de 1920 - 6 de
abril de 1992), fue un escritor y bioquimico ateo judio
nacionalizado estadounidense nacido en Petrovichi, en
la entonces Republica Socialista Sovietica de Bielorrusia,
exitoso y excepcionalmente prolifico autor de obras de
ciencia ficcion, historia y divulgacion cientifica.
</div>
<div id="foto">
<img src="fundacion.jpg" />
</div>
</div>
<br>
<button onClick="mostrarFoto()">Mostar foto</button>
</body>
</html>
Al ejecutar el código sobre el navegador se muestran estas tres pantallas:
