jQuery: creare un sommario di pagina in modo automatico

Creare un sommario per un documento HTML può essere un compito laborioso qualora il documento sia costituito da molte sezioni. Fortunatamente jQuery ci permette di automatizzare questo processo.

Partendo dal presupposto che il vostro documento rispetti la semantica della marcatura e l'ordine logico delle intestazioni, possiamo creare il seguente plugin che opera appunto sulle intestazioni per creare il sommario:

(function($) {
    $.fn.autoToc = function(options) {
        var settings = {
            titles: 'h2',
            section: 'section',
            text: 'Table of contents'
        };
        options = $.extend(settings, options);
        return this.each(function() {
            var element = $(this);
            var html = '<div id="toc"><h3>' + options.text + '</h3><ul>';
            $(options.titles, element).each(function(i) {
                var title = $(this);
                title.attr('id', options.section + '-' + (i + 1));
                html += '<li><a href="#' + options.section + '-' + (i + 1) + '">' + title.text() + '</a></li>';
            });
            html += '</ul></div>';
            $(html).insertBefore($(options.titles + ':first', element));
        });

    };
})(jQuery);

Esempio d'uso:

$(function() {
	$('body').autoToc();

});