nicht angemeldet
Lieber coder1979,
<select onchange="changeLang(this.value);"> <option value="">Bitte wählen</option> <option value="0">Deutsch</option> <option value="1">Englisch</option> <option value="2">Spanisch</option> </select>also ich würde da Radio-Buttons verwenden. Im
<label>-Text würde ich die spracheigene Version notieren:<ul id="lang-select"> <li> <label for="de"> <input id="de" name="lang" type="radio" value="de" checked> Deutsch </label> </li> <li> <label for="en"> <input id="en" name="lang" type="radio" value="en"> English </label> </li> <li> <label for="es"> <input id="es" name="lang" type="radio" value="es"> Español </label> </li> </ul>Das
onchange-Attribut in HTML würde ich durch einen Aufruf vonaddEventListener()in JavaScript ersetzen.Es kann reizvoll sein, die Textbausteine in einer JSON-Datei vorzuhalten, die von JavaScript geladen wird. Man kann natürlich auch alles gleich zusammen in das HTML-Dokument werfen, wenn man das kompakt in einer Datei ausliefern muss:
{ "links-and-layout-remain-intact": { "de": "Links und Layout bleiben erhalten", "en": "Links and layout are preserved", "es": "Se conservan los enlaces y el diseño." }, "welcome": { "de": "Herzlich Willkommen!", "en": "Warm Welcome!", "es": "¡Cálida bienvenida!" } }Hier wird einem Schlüssel ein Objekt zugewiesen, welches für jede der Sprachen eine eigene Eigenschaft hat - der Text in der jeweiligen Landessprache. Sollte einmal eine Sprache zu einem Schlüssel fehlen, kann die Übersetzungsfunktion (oder -methode) eine Default-Sprache als Ersatz wählen - oder den Schlüssel selbst als Notlösung verwenden.
Die Textbausteine können via JavaScript als
textContent-Eigenschaft einer DOMNode zugewiesen werden. Welche Bausteine wohin müssen, könnte man durch ein passendes Attribut angeben, sagen wirdata-i18n(ein data-Attribut):<h1 data-i18n="welcome"></h1> <p class="notice" data-i18n="links-and-layout-remain-intact"></p>Mittels JavaScript nimmt man den Attributwert des
lang-Attributs des<html>-Elements und findet nun die passende Sprachversion für den Schlüssel aus demdata-i18n-Attribut (also "welcome" auf "de") und schreibt das Ergebnis in dietextContent-Eigenschaft des H1-Elementobjektes.Auf diese Weise kann man live sofort alle Textbausteine in einer anderen Sprache anzeigen lassen, also sprichwörtlich
onchangebeim jeweiligen Radio-Button.[Edit]Ich habe so etwas schon mal verwendet.[/Edit]
Liebe Grüße
Felix Riesterer
Hi Felix,
super Danke! Genau nach dem Tipp hab ich gesucht. Die Sprachauswahl mach ich tatsächlich später anders (mit Flaggen), in meinem Beispiel war das nur die Dirty-Variante. Aber dein Tipp mit dem JSON-Array und dem Schlüssel/Data-Attribut find ich deutlich besser als meinen Ansatz (und auch Pflegeleicher und wahrscheinlich deutlich schneller)
Der Martin
Gunnar Bittersmann
Auge