Edwin V.

Voor een project was ik op zoek naar een simpele manier om tabbladen in html te maken. Tabbladen vormen een manier om alternatieve inhoud naast elkaar weer te geven in een kleine ruimte. In dit specifieke geval zocht ik naar een mogelijkheid om twee lijsten met gegevens op dezelfde pagina kwijt te kunnen, zonder hierbij de pagina onnodig lang te maken. Aangezien de gegevens inhoudelijk gezien niet noodzakelijk naast elkaar hoeven te staan, leken tabbladen mij een aantrekkelijke optie.

De meeste tabblad interfaces die ik tegen kwam op het web hadden het grote nadeel dat eerst de navigatie en vervolgens de inhoud van de tabbladen vastgelegd wordt in html. Semantisch vind ik dit niet correct, je kunt immers de tabbladen zien als verschillende paragrafen met een kopje. Misschien is een opsomming van verschillende gegevens nog wel een betere omschrijving.

De ideale semantische structuur voor tabbladen leek mij:

<ul class="TabInterface">
<li>
<h2>Item 1</h2>
<div>
<p>
Inhoud 1
</p>
</div>
</li>
<li>
<h2>Item 2</h2>
<div>
<p>
Inhoud 2
</p>
</div>
</li>
<li>
<h2>Item 3</h2>
<div>
<p>
Inhoud 3
</p>
</div>
</li>
</ul>

Dit is valide xhtml en met behulp van CSS en een klein beetje JavaScript kunnen we hier zonder problemen een mooie tabblad interface van maken. De JavaScript is nodig om de click op het h2 element op te kunnen vangen en vervolgens het actieve tabblad te sluiten en de aangeklikte te openen.

Ik ben begonnen met het opzetten van de CSS. Allereerst moeten de bullets voor de lijstelementen weg en hebben we de marge niet meer nodig. Verder geef ik de lijst een relatieve positie, zodat we zonder problemen elementen absoluut kunnen positioneren binnen de lijst.

.TabInterface {
padding: 0px;
margin: 0px;
list-style-type: none;
position: relative;
}

Het volgende doel is om alle h2 elementen in een lijstelement in een balk naast elkaar te plaatsen. Dit kunnen we doen door middel van een float naar de linkerkant, alleen zal dan de inhoud van een tabblad in de weg zitten. Hierdoor is het nodig om de div elementen absoluut te positioneren, zodat de h2 elementen netjes naast elkaar komen te liggen.

.TabInterface h2 {
float: left;
border-color: black;
border-style: solid;
border-width: 1px 1px 0 1px;
margin: 0 5px;
font-size: 10pt;
padding: 3px 5px;
height: 14px;
background-color: lightgrey;
z-index: 10;
cursor: pointer;
}

.TabInterface div {
display: none;
clear: both;
position: absolute;
top: 20px;
left: 0px;
border: 1px solid black;
}

De volgende stap is het verschil aanbrengen tussen actieve en niet actieve tabbladen en koppen. Een actief tabblad zal zichtbaar moeten zijn en we willen eventueel de stijl van een kop aanpassen zodra deze actief is. De volgende css zorgt hiervoor:

.TabInterface li.TabActive div {
display: block;
}

.TabInterface li.TabActive h2 {
position: relative;
top: 0px;
background-color: white;
}

Om ervoor te zorgen dat we tabbladen kunnen activeren, hebben we een klein stukje JavaScript nodig. De verantwoordelijkheid van deze code is om tijdens het laden van de pagina de volgende zaken te regelen:
* Het eerste element in de lijst moet initieel het actieve tabblad zijn, dit element moet dus de class TabActive krijgen.
* Elk element in de lijst moet een event handler toegekend krijgen. De handler moet ervoor zorgen dat eerst het huidige actieve tabblad gedeactiveerd wordt om vervolgens de nieuwe selectie te activeren.

Ik heb ervoor gekozen om gebruik te maken van het Prototype Javascript Framework, omdat deze in het project ook gebruikt wordt.

window.onload = function(){
document.getElementsByClassName('TabInterface').each ( function(TabInterface){
var FirstTab = true;
$A(TabInterface.childNodes).each( function(Tab){
if(Tab.nodeName 'LI'){ if(FirstTab){ Element.addClassName(Tab, 'TabActive') FirstTab = false; } Tab.onclick = function(e){ $A(Event.element(e).parentNode.parentNode.childNodes).each( function(OtherTab){ if(OtherTab.nodeName 'LI'){
Element.removeClassName(OtherTab, 'TabActive');
}
});
Element.addClassName(Event.element(e).parentNode, 'TabActive');
}
}
});
});

}

Het eindresultaat is hier te vinden.