blognote-info.com

Je continue sur ma lignée des trucs simples ;) La je me sert que de Behaviour et du HTML pour faire une tabulation simple et stylisable assez facilement !

Dans un premier temps je considère le code html suivant :

<dl id="phones" class="tabs">
	<dt class="tab">Home</dt>
	<dd id="phones-home" class="tab-content">
		Ici plein de truc pour home
	</dd>
	
	<dt class="tab">Office</dt>
	<dd id="phones-office" class="tab-content">
		Office part !
	</dd>
	
	<dt class="tab">Truc</dt>
	<dd id="phones-truc" class="tab-content">
		TRUUUUC
	</dd>
</dl>

J'ai mis des class partout et des identifiants qui permettent d'accéder directement aux tabulations ... Il y a une convention de nomage (je sais ça se dit pas en français ...) qui consiste a dire que la dl porte un nom et que toutes les tabulations pourte ce nom suivi d'un tiret et du contenu du dt en minuscule ...

Facile : la dl porte le nom phones ... une dt qui affiche Home doit avoir un dd qui porte le nom phones-home ... pas plus compliqué et encore assez logique en soit !

Pour ceci voici le ruleset que j'applique pour faire fonctionner ces tabs :

var tabulationRules = {
 
	'.tab-content': function (elt) {
		elt.style.display = 'none';
	},
	
	'.tab': function (elt) {
		elt.onclick = function (event) {
			var source = getSource(event);
			var tabContainer = source.parentNode;
			var name = tabContainer.id + '-' + source.innerHTML.toLowerCase().trim();
			
			var dts = tabContainer.getElementsByTagName('dd');
			for (i = 0; i < dts.length; i++) {
				dts[i].style.display = 'none';
			}
 
			var elt = document.getElementById(name);
			if (elt != null) {
				elt.style.display = 'block';
			}
		}
	}
 
}
 
Behaviour.register(tabulationRules);

Voici quelques fonction supplémentaires :

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g, '');
}
 
var getSource = function(event) {
	if (!event) var event = window.event;
	
	var targ;
	if (event.target) targ = event.target;
	if (event.srcElement) targ = event.srcElement;
	if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
	
	return targ;
}

Rien de plus simple ... on reconstruit le nom par rapport à l'identifiant du parent et au contenu de la source. On cache tous les dd, et on affiche le seul qui nous intéresse !

Si vous voulez adapter la structure du html il faudra également adapter la manière dont on récupère les info ici mais c'est largement faisable !