Onglets et changement instantané de la langue
Description
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.
J'ai évité "d'enjoliver" le test pour bien mettre en évidence les moyens utilisés.
Dans n'importe quelle situation de pages actives, le changement de langue se fait instantanément sur les textes, les info-bulles et les inputs.
Pour un essai direct, consultez:
http://www.william-voirol.ch/Prog
sous 'Tests'.
Le zip (19 Ko) contient tous les fichiers du test.
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.
Source / Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Onglets</title>
<meta name='Author' content='William VOIROL, Switzerland, Nov 2011'/>
<style type='text/css'>
.ongN {float:left; height:16px; text-align:center; font-weight:bold;
border:solid gray 4px; padding:4px 8px 2px 8px}
.ongS {float:left; height:16px; text-align:center; font-weight:bold;
border-top:solid gray 4px; border-right:solid gray 4px; border-left:solid gray 4px;
padding:8px 8px 2px 8px}
</style>
<script type='text/javascript' src='mess.js'></script>
<script type='text/javascript' src='Ong.js'></script>
<script type="text/javascript">
// le fichier 'mess.js' contient _abr[], _lng[], _mes[][]
function Chn(idx) { // fait un changement de langue
var e,k,m=_mes[idx],n,s,t=document.getElementsByTagName('*');
for (k=0;k<t.length;k++)
if (s=(e=t[k]).id) { // changements 'automatiques'
if ((n=s.indexOf('_i'))>=0) e.innerHTML=m[parseInt(s.substr(n+2))];
if ((n=s.indexOf('_v'))>=0) e.value=m[parseInt(s.substr(n+2))];
if ((n=s.indexOf('_t'))>=0) e.title=m[parseInt(s.substr(n+2))];
}
document.getElementById('Page4').innerHTML= // exemple de changement spécifique
'<br/> '+_lng[idx]+':<br/> '
+m[6]+'<br/> '+m[7]+'<br/> '+m[8]+'<br/> '+m[9];
// ajoutez ici les éventuels changements instantanés dans d'autres fenêtres ...
}
function Nav() { // Index la langue du navigateur (0 si absent)
var nv=(navigator.userLanguage)?navigator.userLanguage:navigator.language;
for (var i=0;i<_abr.length;i++) if (nv.indexOf(_abr[i])>=0) return i;
return 0 // si pas trouvé
}
function Ban() { // Construit un innerHTML formé des banières
var i,s="";
for (i=0;i<_abr.length;i++) s+="<img src='"+_abr[i]+".png' alt='"
+_abr[i]+".pgn' title='"+_lng[i]+"' width='24' height='16' onclick='Chn("
+i+")' style='cursor:pointer'/> ";
return s
}
function Ini() {
document.getElementById('Ban').innerHTML=Ban();
new Ong('Page',['#F8F8F8','#FFDDDD','#FFFFBB','#DDFFDD','#DDDDFF'],0,1,500,400);
new Ong('Num',['#66BBDD','#77CCE7','#88DDEE','#99EEF7'],2,6,300,160);
Chn(Nav());
}
</script>
</head>
<body style='' onload='Ini()'>
<div style='float:left; background-color:gray'>
<div id='Page'></div>
<div id='Page0'> <!-- Afrique -->
<br/><br/> <input id='haha_v0_t10' type='button' onclick='alert(this.value)'/>
</div>
<div id='Page1'> <!-- Amérique -->
<br/><br/> ... <input id='pre_v3_t10' type='text' onchange='alert(this.value)'/>
</div>
<div id='Page2'> <!-- Asie -->
<br/><br/> +++ <label id='lab_i0'></label> +++
<br/><br/> ### <span id='spn_i10'></span> ###
</div>
<div id='Page3'> <!-- Europe -->
<br/><br/><br/>
<div style='float:left; width:80px'>0, 1, 2, 3:</div>
<div style='float:left'>
<div id='Num'></div>
<div id='Num0'></div>
<div id='Num1'></div>
<div id='Num2'></div>
<div id='Num3'></div>
</div>
</div>
<div id='Page4'> <!-- Océanie: changée spécifiquement --> </div>
</div>
<!-- Menu à droite -->
<div style='float:left; width:112px; height:424px; padding:3px; background-color:#BBBBFF'>
<div id='Ban'></div>
</div>
<div style='clear:both'><br/>
<a href='http://www.william-voirol.ch/Prog/Tests/Onglets.zip'>Zip du code</a></div>
<div><br/><a href='http://www.william-voirol.ch/Prog'>Autres programmes</a></div>
</body>
</html>
Fichier 'Ong.js':
================
function Ong(id,col,ac,m0,w,h) {
var e,i,k=Ong.all.length,n=col.length,p,s,z='';
if (!(e=document.getElementById(id))) {alert("bloc id='"+id+"' ?"); return}
for (i=0;i<n;i++) {
if (!(p=document.getElementById(id+i))) {alert("bloc id='"+id+i+"' ?"); return}
s=p.style; s.backgroundColor=col[i]; s.height=h+'px'; s.width=w+'px'; s.display=(i==ac)?'':'none';
z+="<div id='"+id+"_i"+(i+m0)+"' class="+((i==ac)?"'ongS'":"'ongN'")
+" style='background-color:"+col[i]+"; cursor:pointer' onclick='Ong.Sel("+k+","+i+")'></div>";
}
e.innerHTML=z; e.style.width=w+'px'; e.style.height='30px'; Ong.all.push(this);
this.id=id; // id de base (utilise les blocks id, id+'0', ..., id+(n-1)
this.ac=ac; // numéro de l'onglet actif
this.m0=m0; // numéro du messages correspondant au premier onglet
}
Ong.Sel=function(k,i) {
var o=Ong.all[k];
document.getElementById(o.id+'_i'+(o.ac+o.m0)).className='ongN';
document.getElementById(o.id+'_i'+(i+o.m0)).className='ongS';
document.getElementById(o.id+o.ac).style.display='none';
o.ac=i; document.getElementById(o.id+i).style.display='';
}
Ong.all=new Array(0);
Conclusion :
J'ai évité "d'enjoliver" le test pour bien mettre en évidence les moyens utilisés.
Dans n'importe quelle situation de pages actives, le changement de langue se fait instantanément sur les textes, les info-bulles et les inputs.
Pour un essai direct, consultez:
http://www.william-voirol.ch/Prog
sous 'Tests'.
Le zip (19 Ko) contient tous les fichiers du test.
Codes Sources
A voir également
- Onglets et changement instantané de la langue
- Changement de repere ✓ - Forum Visual Basic
- Changer langue visual studio - Forum Visual Basic 6
- Changement de repère - Forum C / C++ / C++.NET
- Langue en c - Forum C
- Changement de repère 3d ✓ - Forum C++ & C++ .NET
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.