Contenido

Tablas de contenido (TOC) con verdadero estilo

8 jul

+ 1

Los chicos de SmashingMagazine, siempre nos dan motivos para escribir un post. Esta vez es debido a la recopilación de “TOC” (Table Of Content — Tabla de Contenidos (o Indice)) de libros, una buena recopilación de ideas para nuestras aplicaciones.

Estas tablas, suelen se un listado de opciones que el usuario puede encontrarse en nuestra aplicación. Desde QuirksMode recuerdo que ví un script desarrollado en Javascript, que nos permitía crear un TOC usando los elementos H de dicha página.

function createTOC() {
	var y = document.createElement('div');
	y.id = 'innertoc';
	var a = y.appendChild(document.createElement('span'));
	a.onclick = showhideTOC;
	a.id = 'contentheader';
	a.innerHTML = 'show page contents';
	var z = y.appendChild(document.createElement('div'));
	z.onclick = showhideTOC;
	var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');
	if (toBeTOCced.length < 2) return false;

	for (var i=0;i<toBeTOCced.length;i++) {
		var tmp = document.createElement('a');
		tmp.innerHTML = toBeTOCced[i].innerHTML;
		tmp.className = 'page';
		z.appendChild(tmp);
		if (toBeTOCced[i].nodeName == 'H4')
			tmp.className += ' indent';
		if (toBeTOCced[i].nodeName == 'H5')
			tmp.className += ' extraindent';
		var headerId = toBeTOCced[i].id || 'link' + i;
		tmp.href = '#' + headerId;
		toBeTOCced[i].id = headerId;
		if (toBeTOCced[i].nodeName == 'H2') {
			tmp.innerHTML = 'Top';
			tmp.href = '#top';
			toBeTOCced[i].id = 'top';
		}
	}
	return y;
}

var TOCstate = 'none';

function showhideTOC() {
	TOCstate = (TOCstate == 'none') ? 'block' : 'none';
	var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents';
	document.getElementById('contentheader').innerHTML = newText;
	document.getElementById('innertoc').lastChild.style.display = TOCstate;
}
  • Buen script.. ya tiene rato que hago algo similar.

    ¿Acaso no es semánticamente apropiado usar un tag ol (lista ordenada) para listar los elementos contenidos?

    Saludos desde Mex.. me voy que se hace tarde para ir a trabajar.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.