Hace ya algún tiempo había creado un pequeño tutorial de como crear un sistema de pestañas independiente de frameworks Js. Para una iniciación no estaba mal, aunque tenía algúnas limitaciones que impedían añadir «subpestañas» o determinados tags usados en el script, lo que a la larga lo convertía en uno de tantos scripts que pasan al olvido.
Es por ello que decidí rehacer el código. Más sencillo, más claro y obviamente más útil. Este nuevo sistema permite añadir pestañas dentro de un panel, e incluso utilizar nuevos divs para el caso de que los contenedores a usar ya lo sean.
Empezamos creando el contenedor que tendrá nuestro sistema de pestañas. Un simple div nos valdrá.
Dentro de este panel, añadiremos las pestañas. Al igual que en muchos sistemas, utilizaremos listas, aunque bien podríamos utilizar simples enlaces.
Bien, ahora crearemos un panel donde se ubicarán las contenidos de cada pestaña. Una buena estructura sería una capa (div) principal, y otra tantas capa (div) por cada pestaña.Todo junto nos quedaría así
1 2 3 4 5 6 7 8 9 |
Lo interesante es crear los estilos y no depender de imágenes. Estos estilos aplicarán las esquinas redondeadas de las pestañas al igual que en los sistemas windows, con excepción – como no – a los explorer, que no disponen de propiedad de «redondeo».
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | /* tamaño y forma del panel principal */ #panel { position: relative; width:400px; height: 300px; margin: 100px 0px 0px 100px; } /* configuracion de las pestañas */ #tabs { position:absolute; left: 0px; top: 0px; margin:0; padding:0; width: 400px; overflow: hidden; z-index: 20; } #tabs li { float:left; */ esto produce compatibilidad al redondear en los distintos navegadores /* -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; */ esto impide seleccionar el contenido de las pestañas eliminando ese feo efecto de selección al clickar y arrastrar */ user-select: none; list-style: none; margin: 1px 1px 0px 0px; display: block; height: 21px; line-height: 21px; padding: 0px 8px; outline: 0px none; font-family: arial; font-size: 10px; text-decoration: none; color: #000; border: 1px solid #91A7B4; border-bottom-width: 0px; background: #fff; border-radius: 4px 4px 0px 0px; cursor: pointer; } #tabs li.active { margin-top: 0px; height: 21px; line-height: 19px; border-top: 3px solid #324A62; cursor: default; } /* Configuración de los paneles */ #panel #paneles { position:absolute; left: 0px; top: 23px; width: 398px; height: 275px; border: 1px solid #91a7b4; border-radius: 0px 4px 4px 4px; background: #fff; overflow: hidden; } #panel #paneles > div{ margin:10px; width: 378px; height: 255px; font-family: arial; font-size: 12px; text-decoration: none; color: #000; overflow: auto; } |
Y el javascript que hace que funcione todo esto
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | function cm_tabs(options) { if((options.tab && options.tab != '') && (options.container && options.container != '')) { var tabs = document.getElementById(options.tab).children; var containers = document.getElementById(options.container).children; for(var i=0; i< tabs.length; i++) { tabs[i].i = i; containers[i].style.display = 'none'; tabs[i].onclick = function() { for(var e=0; e < containers.length; e++) { tabs[e].className = '' containers[e].style.display = 'none'; } tabs[this.i].className = 'active'; containers[this.i].style.display = 'block'; } } if(options.active && options.active { tabs[(options.active-1)].className = 'active'; containers[(options.active-1)].style.display = 'block'; } else { tabs[0].className = 'active'; containers[0].style.display = 'block'; } } return false; } |
Finalmente ejecutamos el javascript con los parámetros que más nos convengan.
1 2 3 | <script type="text/javascript">// <![CDATA[ cm_tabs({tab : 'tabs', container : 'paneles', active : 1}); // ]]></script> |
Donde la propiedad «tab» representa el ID del contenedor de las pestañas, «container» de los paneles que conforman el contenido de las pestañas. Esto nos permitiría dado el caso, colocar las pestañas en un lado y el contenedor en otro. Finalmente «active» representa la pestaña que queremos se muestre como activa el ejecutar el script. Así de sencillo.
El código completo y listo para funcionar lo podéis obtener de los siguientes enlaces:
[ ejemplo de pestañas ] [ otro ejemplo más complejo ] [ descargar ]
25 de octubre de 2012 a las 13:25