Numérotation automatique d'éléments à partir d'un nom de classe

Résumé

Ce document propose un script qui permet de numéroter de façon automatique un élément à partir d'un nom de classe.

Auteur: Christian Rémillard, GRDS

Modification: 2003-01-07


numeroteElement

numeroteElement(élément, classe, [masque])

Paramètres

élément
Obligatoire. Le nom de l'élément servant à la numérotation.
classe
Obligatoire. Le nom de la classe servant à la numérotation.
masque

Facultatif. Chaîne de caractères devant servir de puce numérotée. Le caractère représentant la numérotation est: #. Celui-ci doit obligatoirement être présent dans la chaîne. Lorsque le masque est absent des paramètres, seul le numéro est affiché.

Le contenu du masque passé en paramètre ne peut être que du contenu textuel (DOMString). Ainsi, il n'est pas possible d'insérer du balisage ou des entités caractère comme, par exemple, un espace insécable sous la forme  .

Exemples

no. #

Q#

#.[espace]

Remarques

Version: 1.0

Modification: 2003-01-07

Description: Écrit une puce à numéro au début du contenu des éléments concernés.

Langages: JavaScript 1.0 et Document Object Model (Core) Level 1

On peut créer plusieurs numérotations indépendantes l'une de l'autre en ayant recours à plusieurs appel du script lors de l'initialisation de la page. Pour plus d'informations, voir le code source de cette page.

En plus de la classe CSS utilisée pour la numérotation, ce script affecte la classe compteur à la puce à numéro.

Installation

  1. Copier le script dans l'en-tête de votre document HTML;

  2. Placer un appel au script dans l'élément <body> sous la forme:

    <body onload="numeroteElement('[nom de l'élément]', '[nom de la classe]', '[masque]')">

    Note: les valeurs des paramètres doivent être placées entre quillemets simples.

  3. Insérez le nom de la classe que vous avez choisi dans l'attribut class des éléments à numéroter;

  4. Au besoin, développer le stylage CSS pour cette classe et la classe de la puce numérotée, soit compteur.

Exemples

Voici un peu de texte permettant d'illustrer la fonctionnalité du script:

Peut-il y avoir plus d'un Titre autre ayant la même sous-métadonnée? Par exemple, peut-il y avoir 2 titres familiers?

Pour ce qui est de l'autorité de cette liste:

Cette liste doit-elle être considérée comme exhaustive? Peut-on ajouter des valeurs sans aucune forme de contrôle?

Et encore un peu de texte pour ne pas finir court.

Code source

appel de la fonction

<body onload="numeroteElement('p', 'question', '[Q#] ')">

fonction

<script type="text/javascript">

function numeroteElement(theTagName, theClass, masque) {

//	==================================================
//	fonction numeroteElement
//	version: 1.0
//	modification: 2003-01-07
//	auteur: Christian Rémillard <christian.remillard@umontreal.ca>
//	        Groupe de Recherche sur les Documents Structurés <GRDS>
//	        http://grds.ebsi.umontreal.ca
//	        Université de Montréal

	var elNode;
	var compteur = 1;
	var puce = '';
	var puceNode;
	masque = masque.split('#');

	// On crée une puce générique sous la forme <SPAN CLASS="compteur"></SPAN>
	var compteurNode = document.createElement('span');
	compteurNode.className = 'compteur';

	// On crée une collection de tous les éléments ayant le nom 'theTagName'
	var qs = document.getElementsByTagName(theTagName);
	
	for (i=0; i<qs.length; i++) {
		elNode = qs.item(i);
		var classAttribute = elNode.className;

		// Y a-t-il la classe 'theClass'?
		if ( classAttribute.indexOf(theClass) != -1 ) {
			// Contenu textuel du compteur
			puce = masque.join(compteur);

			// Création de l'élément pour cette puce à partir de la copie générique
			puceNode = compteurNode.cloneNode(false);

			// On y ajoute le contenu textuel
			puceNode.appendChild(document.createTextNode(puce));

			// Ajout du noeud compteur
			elNode.insertBefore(puceNode, elNode.firstChild);

			// Incrémentation du compteur
			compteur ++;
		}
	}
}
</script>

© 2003, GRDS - Groupe de recherche départemental sur les documents structurés. Commentaires: <grds@umontreal.ca>