Ya hay muchos plugins y scripts con y sin jQuery para crear sistemas de pestañas y sliders con javascript, no obstante este me ha llamado la atención por la sencillez de uso y los efectos que incluye.
tabSwitch es completamente personalizable con CSS y requiere muy poco código para empezar a funcionar, además el código es muy sencillo y está bastante bien explicado para que no te cueste nada adaptarlo a tus necesidades.
El HTML debería ser algo como esto:
<div id="tabSwDisplay">
<div class="SlideTab" id="Tab0">
...
</div>
<div class="SlideTab" id="Tab1">
...
</div>
<div class="SlideTab" id="Tab2">
...
</div>
<div class="SlideTab" id="Tab3">
...
</div>
<div class="SlideTab" id="Tab4">
...
</div>
</div>
Y el javascript:
//Con este código creamos la pestaña
$('.SlideTab').tabSwitch('create', {type: 'slide', height: 300, width: 440});
//Este código sirve para movernos adelante y atrás entre las pestañas
$('.SlideTab').tabSwitch('moveStep',{step: parseInt($(this).attr('rel'))});
//Este para movernos a una determinada pestaña en base al atributo rel
$('.SlideTab').tabSwitch('moveTo',{index : $(this).attr('rel') });tabSwitch: http://www.hieu.co.uk/blog/index.php/tabswitch/
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
Feed RSS de los comentarios de este post.
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios
[...] tabSwitch, pestañas y sliders sencillos con jQuery – [...]