Crear tabs para cualquier sitio con jQuery (Parte I)
jQuery es una tecnología que simplifica muchas cosas a la hora de realizar el trabajo de estructura de un sitio web, como verán, anteriormente en el desarrollo de esta plantilla, los “TABS” del Sidebar se establecían a través del script de DOMTAB, sin embargo estos me presentaron problemas al incorporarlos a WordPress, así que decidí usar jQuery y en realidad ha sido muy sencillo el insertarlo a la plantilla.
Para iniciar el proceso, entre las etiquetas <head> y </head> debemos añadir las siguientes líneas:
<script src="http://code.jquery.com/jquery-latest.js"> <!--mce:0--> </script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript"> <!--mce:1--> </script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript"> <!--mce:2--> </script> <script type="text/javascript"> <!--mce:3--> </script>
A continuación, insertaremos entre las etiquetas <body> y </body> el contenido del recuadro, más adelante, veremos como agregar más recuadros también.
<div id="EJEMPLO" class="estilo"> <ul> <li><a href="#tab-1">Título 1</a></li> <li><a href="#tab-2">Título 2</a></li> </ul> <div id="tab-1"> Aquí el contenido</div> <div id="tab-2"> Aquí el contenido</div> </div>
Podemos agregar tantas pestañas como deseemos sin ningún problema, pero hay que intentar mantener el órden así que es mejor no recargar de pestañas un recuadro. El siguiente paso será la hoja de estilos (el mismo al que uso para esta plantilla) para poder asignarle un diseño al recuadro que contiene la pestañas:
.estilo{ margin:0 0 15px 0; padding:0; width:310px; } .ui-tabs-nav{ margin:0; padding:0; list-style:none; } .ui-tabs-nav li { margin:0 2px 0 0; padding:0 5px 0 5px; float:left; height:30px; border-top:1px #3399FF solid; border-right:1px #3399FF solid; border-left:1px #3399FF solid; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:30px; text-transform:uppercase; } .ui-tabs-nav li:hover { background:#EBEBEB; color:#333333; } .ui-tabs-nav li:hover a { color:#333333; } .ui-tabs-nav li { background:#FFFFFF; } .ui-tabs-nav li a { color:#336699; text-decoration:none; } .ui-tabs-panel { margin:0; padding:5px; float:none; clear:both; border:#3399FF solid 1px; width:298px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; } .ui-tabs-panel ul { margin:0; padding:0 0 0 15px; } .ui-tabs-panel ul li { margin:0 0 5px 0; } .ui-tabs-panel a { color:#336699; text-decoration:none; } .ui-tabs-panel a:hover { color:#3399FF; text-decoration:underline; } .ui-tabs-hide { margin:0; padding:5px; float:none; clear:both; display:none; border:#3399FF solid 1px; width:298px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; } .ui-tabs-hide ul { margin:0; padding:0 0 0 15px; } .ui-tabs-hide ul li { margin:0 0 5px 0; } .ui-tabs-hide a { color:#336699; text-decoration:none; } .ui-tabs-hide a:hover { color:#3399FF; text-decoration:underline; }
El significado de cada una de las etiquetas de estilo CSS:
- estilo: Es el estilo de todo el recuadro con el cual trabajaremos
- ui-tabs-nav: Es la lista que alojará a los títulos de las pestañas
- ui-tabs-panel: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro visible
- ui-tabs-hide: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro oculto que más adelante al pulsar sobre el título del recuadro se verá y convertirá en
ui-tabs-panel
El agregar otro recuadro con contenido no es difícil, simplemente duplicamos el anterior recuadro y realizamos lo siguiente:
id: modificamos este atributo del primerdivpara asignarle un identificador al recuadrohref: modificamos este atributo por otro que identifique a otro título (manteniendo el símbolo de numeral)- Añadimos entre las etiquetas
<script>y</script>que usamos en el primer paso lo siguiente:$(document).ready(function(){ $("#EJEMPLO2 > ul").tabs(); });
En donde editamos la palabra EJEMPLO por el nombre que le asignamos al segundo recuadro (el atributo
id)
Definitivamente, este es un uso básico de esta herramienta y existen uso m´ñas complejos que se le pueden asignar, tal y como se puede observar en el sitio de jQuery.
Actualización: Si tienes un blog en WordPress, puede seguir el siguiente manual para integrarlo.
Etiquetas: JavaScript, jQuery, Manual, Pestañas, Programación, Tabs, Tutorial, Utilidades, Web, Wordpress
