Wextensible (Català)

contenidor de pestanyes a dues files d’una taula

el primer contenidor de pestanyes que es presenta a continuació és el que s’estructura en una taula amb dues files. Poso aquí un exemple amb 3 pestanyes:

Aquest és el codi HTML de aquesta estructura:

Com veiem es tracta d’una taula amb 2 files <tr>. A la primera posem les pestanyes en cel·les de títol <th>, alternant una cel·la que farà de buit (classe tabcks) i una altra amb el títol de la pestanya (tabck). En la dels buits posem un espai no separable   per forçar que no es modifiqui l’ample de l’buit. Les cel·les que fan de pestanyes s’identifiquen afegint el nombre a el nom de la classe amb id="tabck-N" on N és el nombre d’aquesta pestanya. Cadascuna porta un esdeveniment onclick="activarTab(this)" per activar aquesta pestanya.

La segona fila té una única cel·la que abasta tantes cel·les com hi ha a la primera fila amb l’atribut colspan="6", en general seran 2N pestanyes comptant amb els buits. Després disposem de N contenidors <div> amb la classe tabdiv i identificats de la mateixa forma amb id="tabdiv-N".

Amb l’actualització d’aquest component en març 2014 he afegit els atributs data-min i data-max a la taula . També he identificat l’element <td> que conté els <div class="tabdiv"> amb id="tab-N". Les versions anteriors seguiran funcionant encara que no contemplin aquests canvis, que serveixen per incloure contenidors de pestanyes dins de contenidors i també per a contenidors amb diverses files de pestanyes com es veurà més avall. Per ara només direm que es declara el rang dels ID de les pestanyes en els data-min i data-max, mentre que la N de id="tab-N" serà el primer índex d’aquest rang.

l’estil per aconseguir aquesta estructura està en la capçalera d’aquesta pàgina:

la taula, que té el model de vores oberts com hem explicat, la fem amb el fons transparent perquè actuï l’efecte dels buits entre pestanyes sobre el fons de l’contenidor on es trobi. Per als buits, les pestanyes i la cel·la inferior es tindrà en compte l’ordre en la sobreescriptura de les vores. Per descomptat, cal mantenir la consistència en els colors usats. Així el color gray és el gris de la vora mentre que el rgb(230,230,205) és el gris clar dels fons.

finalment els contenidors div que finalment disposen el contingut a presentar han de ser adequadament dimensionats. L’estil anterior és genèric i serveix per a tots els contenidors. Especifiquem ample 100% i l’alt serà interlocutòria. Després per a cada aplicació fixarem les mesures que necessitem.Així per al primer exemple anterior d’aquesta pàgina tenim aquest estil que sobreescriu a l’anterior:

Per activar una pestanya i desactivar les altres hem d’usar Javascript. Aquest codi està a la capçalera d’aquesta pàgina:

En el bucle es itera pel total de pestanyes. Per tant comencem declarant un màxim de pestanyes MAXTABS que podríem inserir i així no hem d’estar canviant amb cada aplicació el límit superior de l’bucle interior a la funció que activa la pestanya. És a dir, aquest script ens serveix sense tocar-lo per a qualsevol nombre de pestanyes igual o inferior a aquest límit.

Després de l’actualització de Març 2014 i per mantenir la compatibilitat amb contenidors ja existents, conservem el funcionament exposat al paràgraf anterior per no haver de modificar l’HTML d’aquests contenidors. No obstant això usant els atributs data-max i data-min a la taula ja no serà necessari iterar per tots els elements fins a aquest límit màxim, de manera que podrem obviar la variable MAXTABS.

Amb la càrrega de la pàgina activem la primera pestanya, o la que desitgem. Després la funció activarTab(unTab) ens executa l’esdeveniment onclick() ubicat a les pestanyes. L’argument porta una referència a la cel·la on es va fer aquest clic. Obtenim l’identificador que és de la forma id="tabck-N" i extraiem el nombre N amb split(). Localitzem el contenidor <div class="tabdiv-N"> per a aquest N. Després iterem per totes les pestanyes activant l’actual i desactivant les altres. Activem amb display = "block" i els colors de fons, vora i lletra desitjats i desactivem igualment però amb valor none per display. La part de pestanyes en diverses files s’explica més avall.

Contenidor de pestanyes dins d’una pestanya

L’actualització de Març 2014 aquest component va ser deguda a la necessitat de ficar un contenidor de pestanyes a una pestanya d’un altre contenidor. En el següent exemple tenim un d’exterior amb tres pestanyes. A la primera fiquem un altre contenidor amb dues pestanyes.

Fem ús de la franja data-min="100" i data-max="102" per especificar les tres pestanyes de la taula exterior. Al <div> de la primera pestanya fiquem una altra taula interior amb estructura de pestanyes i usant el rang data-min="200" i data-max="201" dels seus dos pestanyes.

el mateix script exposat a l’apartat anterior s’encarrega de iterar per les pestanyes de cada rang, limitant-se a actuar sobre cada contenidor. Com en una pàgina podem tenir molts contenidors de pestanyes, per organitzar-nos podem usar rangs com 0..99, 100..199, 200..299, etc. per a cada un dels contenidors de la pàgina. Particularitzem els amples dels dos contenidors amb aquest CSS (situat a la capçalera d’aquesta pàgina):

Contenidor amb diverses files de pestanyes

I ja posats amb una actualització (Gener 2014) , perquè no donem la possibilitat de tenir diverses files de pestanyes.

El codi HTML per això és així:

En primer lloc la taula ha de portar un atribut data-filas sense cap valor. Després veiem que hi ha tres files <tr> per pestanyes. La penúltima fila de la taula és la fila activa. Està abans de la fila amb classe "filadiv" que inclou els continguts que es mostren i oculten. Quan fem clic en una pestanya de les files superiors reubicamos aquesta fila perquè passi a ser la fila activa. Aquest tros de script es troba dins de la funció activarTab() exposada en un apartat anterior:

Destaquem també que podem posar menys pestanyes en una fila.La primera fila té dues pestanyes i les altres tenen tres. Això s’aconsegueix agregant un th separador (classe "tabcks") amb un colspan="2" per abastar 2 columnes, ja que el total de columnes en aquest exemple ha de ser 6.

contenidor de pestanyes a cossos de taula

Aquesta segona estructura és una mica més complexa que l’anterior ja que cada contenidor de cada pestanya s’inclou en un cos <tbody> de la taula. Sabem que una taula sempre té un a el menys d’aquests elements, encara que pot obviar quan s’escriu el codi. Així fem servir una capçalera de taula <thead> per ubicar les pestanyes i 3 cossos <tbody> per als contenidors.

l’HTML d’aquesta estructura és:

Les pestanyes són a la capçalera de la taula <thead>. Els esdeveniments onclick="activarTabB(this, 'p-N') ens permetran activar la pestanya N i desactivar la resta. Els continguts estan en els cossos <tbody>, on podem posar el nombre de files <tr> que vulguem. Però cada fila tindrà només una cel·la <td> que abastarà tantes columnes com pestanyes declarant-colspan="N" per a N pestanyes.

Aquest és l’estil que també està en la capçalera d’aquest document:

aquest és el Javascript que també està en aquest document:

el funcionament és similar a l’vist en l’apartat anterior. Activem la primera pestanya que desitgem amb la càrrega de la pàgina. Després obtenim l’element <tbody>, busquem el seu pare i després obtenim la col·lecció de cossos de la taula per iterar per ells. La resta és el mateix, activar la pestanya actual en aquest cas amb tbs.style.display = "table-row-group" i desactivar-la amb el valor none.