SummArg | Cursos y recursos para webmasters

07/06/2011

Crear una tabla de contenidos automáticamente con jQuery

STOC (Smooth Table of Contents jQuery) es un plugin que identifica los headings de un documento y los utiliza para crear un índice o tabla de contenidos, respetando las jerarquías de los mismos. Su implementación es simple y gracias a que el autor del plugin explica a fondo su funcionamiento también resulta simple efectuar modificaciones al mismo para alterar el modo en que registra los títulos y subtítulos.

 

Descarga | Demo

 

El plugin posee algunas opciones para su configuración:

  • Es posible indicarle en donde buscar para limitar lo que ingresa al índice
  • Se puede precisar el nivel de profundidad (hasta que etiqueta H incluir)
  • Etiqueta de inicio: En que heading arrancar (h1, h2, h3…)
  • Título de la caja
  • Tipo de lista (UL u OL)

 

Las opciones de este plugin se modifican desde jquery.stoc.js en sus primeras líneas.

(function($){
$.fn.stoc = function(options) {
var defaults = {
search: "body", // Lugar a buscar por títulos
depth: 6, // Profundidad de headings a buscar
start: 1, // En que headings iniciar
stocTitle: "<h2>Contenidos</h2>", //que mostrar al inicio de nuestra tabla
listType: "ul", //tipo de lista: ul u ol
smoothScroll: 1
};
var options = $.extend(defaults, options);
return this.each(function() {
alert("Soy una alerta!");
});
};
})(jQuery);

El ejemplo que otorgan sirve como excelente punto de inicio para comprender el uso del plugin. Se adapta a cualquier trabajo realizado.

Dejar un comentario