Scripts

Javascript tab generator

Door Jos -20-01-2007 00:00 -5.395 views

Beschrijving: Dit script maakt automagisch een "tab menu" aan voor alle div elementen met als klassenaam tab. Instructies: Maak je pagina zoals je dat gewoonlijk ook doet, maar bedenk van te voren welke gedeeltes tabs moeten worden. Plaats deze tab gedeeltes onder elkaar: Daarna gaan we bepalen waar het menu voor de tabs komt te staan. Het menu wordt automagisch gevuld met de knoppen voor de tabs, dus je hoeft alleen maar dit element te plaatsen op de plek waar je de tabs wilt hebben staan. Nu is het HTML gedeelte klaar en moeten we alleen nog de tekst voor de tabs instellen, maar dit is optioneel. Verander deze lijn naar je gewenste namen, of je kan de array leeg laten, dan zet hij de standaard tekst "Tab N" er in. Op en aanmerkingen welkom !

Download alle bestanden als ZIP

javascript-tab-generator

<? //kleuren en opmaak
/* Algemene functies */
var fns = {
	// Toggle een elements zichtbaarheid
	toggle: function(el, force) {
		if(typeof force != 'undefined')
			el.style.display = force;
		else
			el.style.display = el.style.display ? '' : 'none';
	},
	// Doorloop object met een functie
	each: function(obj, fn) {
		if(obj[0])
			for(var i=0;i<obj.length;i++) fn.apply(obj[i], [i]);
		else
			for(var i in obj) fn.apply(obj[i], [i]);
		return obj;
	},
	// Navigeer naar een tab
	gotoTab: function() {
		var self = this;
		fns.each(document.getElementsByTagName('div'), function(i){
			if(/^tab$/.test(this.className)) {
				if(self.xid == i)
					fns.toggle(this, '');
				else
					fns.toggle(this, 'none');
			}
		})
	},
	// Prepareer alle tabs
	initTabs: function() {
		var tabMenu = document.getElementById('tabmenu'),
		li = document.createElement('li'),
		span = document.createElement('span'),
		counter = 1;
		fns.each(document.getElementsByTagName('div'), function(i){
			if(/^tab$/.test(this.className)) {
				if(counter>1)
					fns.toggle(this);
				li = li.cloneNode(false);
				span = span.cloneNode(false);
				span.className = 'tabButton';
				span.appendChild(document.createTextNode(tabTexts[counter-1] || 'Tab ' + counter));
				li.xid = i;
				li.onclick = fns.gotoTab;
				li.appendChild(span);
				tabMenu.appendChild(li);
				counter++;
			}
		})
	}
};

/* Hier initialiseren we de tabs */
// Eventuele tabmenu teksten, standaard wordt de tekst "tab N" gebruikt
//var tabTexts = [];
var tabTexts = ['Home', 'Over ons', 'Gastenboek', 'Links', 'Downloads', 'Contact'];
if(window.addEventListener)
	window.addEventListener('load', fns.initTabs, false);
else if(window.attachEvent)
	window.attachEvent('onload', fns.initTabs);
?>