Sommaire automatique pour Joomla

28932 vues
29 mai 2013
Cyril
joomla

 

Le nouveau module de sommaire automatique pour Joomla! est accessible à cette adresse: https://www.pulsar-agency.com/telechargements-gratuits/sommaire-automatique

Ce sommaire automatique génère automatiquement la liste imbriquée des h2 et h3 de votre page et est basé sur la librairie Javascript jQuery.

 

Pour créer un sommaire automatique en utilisant jQuery, vous pouvez suivre les étapes suivantes :

  1. Créez une structure HTML pour votre contenu avec des balises <h1>, <h2>, <h3> etc. pour définir les titres de section.

<div class="content">
<h1>Titre de la section 1</h1>
<p>Contenu de la section 1</p>
<h2>Titre de la sous-section 1.1</h2>
<p>Contenu de la sous-section 1.1</p>
<h2>Titre de la sous-section 1.2</h2>
<p>Contenu de la sous-section 1.2</p>
<h1>Titre de la section 2</h1>
<p>Contenu de la section 2</p>
<h2>Titre de la sous-section 2.1</h2>
<p>Contenu de la sous-section 2.1</p>
<h2>Titre de la sous-section 2.2</h2>
<p>Contenu de la sous-section 2.2</p>
</div>

  1. Ajoutez un élément de liste pour chaque titre de section en utilisant jQuery. Vous pouvez utiliser la méthode each() pour parcourir tous les titres de section et créer des éléments de liste pour eux, et la méthode appendTo() pour ajouter les éléments de liste à une liste de navigation.

$(function() {
var toc = $('<ul>');
$('.content :header').each(function(i, header) {
var level = header.nodeName.replace(/h/i, '');
var text = $(header).text();
var id = 'heading-' + i;
$(header).attr('id', id);
toc.append($('<li>').append($('<a>').text(text).attr('href', '#' + id)).addClass('level-' + level));
});
toc.appendTo('body');
});

  1. Appliquez un style CSS pour mettre en forme la liste de navigation et ancrer les éléments de liste aux titres de section correspondants.

ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: #000;
}

.level-1 a {
font-weight: bold;
font-size: 1.2em;
display: block;
padding: 5px;
}

.level-2 a {
font-weight: normal;
font-size: 1em;
padding-left: 10px;
}

.level-3 a {
font-weight: normal;
font-size: 0.9em;
padding-left: 20px;
}

.content :target {
background-color: #ffe;
}

Cela va créer une liste de navigation avec des liens ancrés aux titres de section correspondants. Les titres de section sont automatiquement récupérés et transformés en éléments de liste à l'aide de jQuery. Vous pouvez personnaliser le style de la liste de navigation et les règles d'ancrage des éléments de liste en modifiant le CSS.