A priori, la représentation par onglets n'a rien à voir avec le changement de langue.
En effet, le titre de cet article devrait être:
"Changer l'affichage selon un paramètre (ou un choix)".
Je vais essayer de décrire deux méthodes dont l'une s'applique principalement aux onglets et
l'autre au changement instantané de la langue; mais ces deux méthodes peuvent se mélanger et se compléter.
La méthode par 'blocks' est basée sur le principe suivant:
On écrit dans un HTML une suite consécutive de blocks (principalement des <div> de même dimension); ils seront maintenus invisibles (display:none), sauf celui qui est choisi (display:block).
Dans la méthode par 'fonction', le changement du choix appelle une fonction qui opère explicitement la modification pour chaque élément concerné.
Elle est souvent utilisée pour le changement instantané de la langue.
La construction de cette fonction peut être fastidieuse, et dans certains cas,
il sera plus simple de définir un 'block' pour chaque langue.
Un avantage de la méthode par fonction est qu'on peut appeler une fonction spécifique pour chaque page et même chaque (sous-)fenêtre ouverte (voir mon article "Dialogue entre fenêtres mère et fille").
Pour simplifier la méthode par fonction et pour la rendre plus 'automatique', j'ai introduit un petit 'truc': lorsque le id d'un élément HTML contient (idx=numéro)
'_i'+idx | '_v'+idx | '_t'+idx
alors son
innerHTML | value | title
est respectivement remplacé par le message d'index idx de la langue choisie (voir function Chn(idx)).
Description des fonctions javascript directement dans le html:
- Chn(i) effectue le changement de langue (la boucle sur tous
les éléments du document réalise les changements 'automatiques').
- Nav() donne l'index de la langue du navigateur.
- Ban() crée un 'innerHTML' contenant les bannières (avec click et titre) des langues.
- Ini() initialise le programme.
L'objet javascript Ong dans le fichier 'Ong.js' facilite l'utilisation de pages affichées par onglets.
Les particularités sont:
- Il suffit d'appeler 'new Ong('xyz',col,ac,m0,w,h)'
et de définir dans body la suite de <div>:
<div id='xyz'></div> ==> contiendra les n=col.length onglets.
<div id='xyz0'> … </div> ==> page 0
…
<div id='xyz6'> … </div> ==> page n-1
- L'innerHTML du div id='xyz' est généré selon la méthode
du changement de langue automatique.
- Les divs 'xyzi' sont les pages et peuvent être remplies librement.
- L'array col détermine les couleurs de fond et col.length le nombre d'onglets.
- ac est le numéro de la page initialement active.
- m0 est le numéro de message du titre du premier onglet.
- w et h sont les dimensions des pages.
Les différentes pages HTML peuvent être construites de manière habituelle dans body.
Dans function Ong(...), les tests d'existence des <div> (avec alert(...)) peuvent être supprimés après les premiers essais.
L'exemple HTML donné contient le groupe d'onglets 'Page' dont l'une des pages contient le groupe imbriqué 'Num'.
Le changement de langue se fait 'automatiquement' dans Chn(idx).
Le test à l'air de bien fonctionner avec IE, Firefox, Google Chrome, Opera et Safari.