Framework ajax pour réaliser des pages web extensibles

(c) 2007-2008 Denis Sureau

https://www.xul.fr/scripts/ajax-extensible-page/

Licence

Le framework A.E.P est distribué sous licence GNU GPL 2.0.

Généralités

La librairie JavaScript dispose de fonctions pour:

• Développer ou résumer une page entière.

• Etendre juste un mot en une phrase ou un paragraphe, et inverser en le réduisant.

• Prendre le texte à afficher à partir de données cachées dans la même page ou à partir de fichiers de textes.

Interface de la bibliothèque

void quietVerbose(target)

Bascule l'élément entre les états développé ou réduit.

void develop()

Etend tous les éléments.

void summarize()

Résume le document, réduit tous les éléments étendus.

Création de la page

Insertion du script

Placer le code suivant dans la section head de la page HTML:

<script src="extensible.js" type="text/javascript"> </script>   
 

Stockage des données dans la page

Les données sont placées dans des balises <div>. Un identifieur est donné à cet élément. La propriété de style display a la valeur none, le contenu sera affiché par votre éditeur HTML wysiwyg, pas par les navigateurs.

Exemple:

<div id="x" style="display:none;">Ceci est le texte développé.</div>

Créer un élément extensible

Les éléments à étendre sont placés n'importe où dans la page grâce aux balises <span>.

Un identifieur est donné à la balise et une propriété est ajoutée pour désigner le texte à insérer.

Si ce texte est stocké dans la page, c'est un identifieur, sinon, s'il est pris dans un fichier, ce sera le nom du fichier.

Un évènement est aussi ajouté à la balise span pour choisir la fonction à appeler.

Le format complet est le suivant:

<span id="dyntext" name="x" onclick="quietVerbose(this);"> Texte à remplacer. </span>

ou:

<span id="dyntext" src="xxx.txt" onclick="quietVerbose(this);"> Texte à remplacer. </span>

• id est l'identifieur de cet élément. La même valeur peut être assignée à tous les éléments AEP.

• name est le nom du div qui contient le texte de remplacement, ou src est un nom de fichier.

• onclick est l'évènement. Différentes fonctions peuvent être appelées (voir précédemment).

• this désigne l'élement <span> lui-même. A partir de l'élément DOM, la librairie est capable de retrouver les valeurs de toutes les autres propriétés de la balise.

Ajouter les commandes globales

Les liens pour étendre ou réduire le document entier sont semblables aux liens précédent, sauf que l'on utilise des balises div.

Voila le format:

<div onclick="develop()>Etendre</div>

<div onclick="summarize()>Réduire</div>

Ou utiliser des boutons

Le format est le même, mais on doit charger une image à la place:

<div onclick="develop();"><img src="expand.gif"></div>

<div onclick="summarize();"><img src="collapse.gif"></div>

Astuces et conseils

Comment démarrer avec une page développée

Insérer ce code après l'inclusion de la bibliothèque extensible:

<script language="JavaScript">
  window.onload=develop;
</script>

ou si l'évènement doit être utilisé pour autre chose:

  window.onload=function() 
  { 
    develop(); 
  }

Comment changer la couleur du texte extensible

Ajouter un style dans un fichier ou dans la page:

.aep { ...style...}

La balise span devient alors:

<span id="dyntext" name="x" class="aep" onclick="quietVerbose(this);"> Texte à remplacer. </span>

Changer la souris sur le texte à étendre

Si vous préférez conserver une couleur proche de celle du texte principal, vous pouvez désigner le texte extensible en modifiant l'apparence de la souris:

.aep { cursor:help; color:#666; }

Liens dans les textes cachés

Evitez de placer trop de liens externes dans le texte qui n'apparait que dynamiquement, cela pourrait être pris par les moteurs de recherche pour du spam.

Développer une partie à la fois

Vous pouvez choisir, quand le lecteur développe une partie du texte, de cacher toute autre partie précédemment développée.
Cela se fait en combinant deux appels de fonction:

<span id="dyntext" name="x" onclick="summarize();quietVerbose(this);">Texte à développer</span>

Besoin d'aide?

Aller sur la FAQ et forum du site Web https://www.xul.fr, et n'hésitez pas à demander des explications. Je répondrai à toutes les questions.