Voici un petit bout de code rapide pour réaliser un sommaire des titres (H1) dans une page de publication assez longue, avec un retour vers le sommaire sous le titre :
var WebPart_SommaireAncres_Variable_Sommaire_CodeRetourSommaire = « <div class=’WebPart_Sommaire_RetourSommaire’><a class=’WebPart_Sommaire_RetourSommaire_a’ href=’#Sommaire’>Retour Sommaire</a><img class=’WebPart_Sommaire_RetourSommaire_img’ src=’/_layouts/DemoCorp/images/WebPart_Sommaire_Fleche-Haut.png’ /></div> »
jQuery(document).ready(function () {
var divMainResize = document.getElementById(‘MainResize’);
/* Ajout des ancres sur les H1 */
var divh1Array = divMainResize.getElementsByTagName(‘h1’);
for (var i = 0; i < divh1Array.length; i++) {
// Ajoute l’id qui permet au menu d’identifier le titre
jQuery(divh1Array).attr(« id », « sommaireIndex » + i);
// Ajoute le lien de retour vers le sommaire
jQuery(divh1Array).after(WebPart_SommaireAncres_Variable_Sommaire_CodeRetourSommaire);
}/* Ajout du sommaire */
var elSommaire = jQuery(« <a name=’Sommaire’></a> »);
jQuery(divMainResize).prepend(elSommaire);
// Génération du sommaire
var elContenuSommaire = jQuery(« <div id=’WebPart_Sommaire’></div> »).appendTo(elSommaire);
jQuery(« <h1 class=’WebPart_Sommaire_h1′>Sommaire</h1> »).appendTo(jQuery(elContenuSommaire));
var elSommaireListe = jQuery(« <ul class=’WebPart_Sommaire_Liste_Lien_ul’></u> »);
jQuery(elSommaireListe).appendTo(jQuery(elContenuSommaire));
for (var i = 1; i < divh1Array.length; i++) { // Début à 1 car nous ajoutons un H1 avec le titre du sommaire
var contenuLi = jQuery(« <li class=’WebPart_Sommaire_Liste_Lien_li’></li> »);
jQuery(contenuLi).appendTo(elSommaireListe);
var contenuLinkLi = jQuery(« <a class=’WebPart_Sommaire_Liste_Lien_a’ href=’#sommaireIndex » + (i – 1).toString() + « ‘> » + divh1Array.innerHTML + « </a> »);
jQuery(contenuLinkLi).appendTo(contenuLi);
}
});
Avec un peu de CSS et des images cela devrait rendre quelque chose de pas mal du tout !