Prototyp der neuen Internationalisierung jQuery-Plug-in

Letzten Monat schrieb ich einen Artikel darüber, wie MicrosoftJQueryDazu beigetragen, den Code des Artikels, sprach auch über einige der Funktionen im Code, der in der ersten Partie beigetragen: jQuery Vorlagen und Daten verknüpfen Unterstützung.

Heute veröffentlichten wir einen Prototyp einer neuen jQuery Internationalisierung Plug-in, dass Sie sich in Ihrem JavaScript-Programm hinzufügen Internationalisierungsfeatures beziehen können. Das Plug-in umfasst internationale Informationen über mehr als 350 Kulturen von Schottisch-Gälisch, Friesland, Ungarisch, Japanisch, kanadisches Englisch. -Plug-ins wird als open Source freigegeben.

Sie können die Prototyp-Version des Plug-ins aus unserem Github Codebasis herunterladen:

Http://github.com/nje/jQuery-Glob

Sie können auch hier einige Beispiele, erfahren Sie über einfache Bedienung.

Verständnis-Internationalisierung

Internationalisierung der JQuery-Plugins können Sie Digital, Währung und Datumsformate zwischen den Kulturen im JavaScript-Code leicht zu behandeln. Dieses Plugin können Sie zum Beispiel ein Land Währungssymbol korrekt angezeigt:

Dieses Plugin können Sie auch um das Datumsformat zu orchestrieren, so dass das Datum und den Monat werden in der richtigen Reihenfolge angezeigt, und der Name der das Datum und den Monat richtig übersetzt werden kann:

Beachten Sie, dass im oben genannten Arabische Datumsformat, das Jahr wird als 1431 angezeigt. Und zwar deshalb, weil das Jahr in Form eines Kalenders umgewandelt wurde.

Einige kulturelle Unterschiede sind stärker ausgeprägt, wie die Verwendung von verschiedenen Währungen oder andere Monatsnamen. Aber andere Unterschiede sind subtil und unerwartet. In manchen Kulturen werden beispielsweise Zahlen nicht in ausgewogener Weise gruppiert. In einer Kultur markiert "Te-IN" in der Sprache (Telugu in Ostindien) Zahlen nach 3 Ziffern gruppiert und dann alle 2 Ziffern gruppiert. Dadurch wird die Zahl 1 Million als "10,00,000" geschrieben werden. Einige Kulturen andererseits gar nicht Gruppennummern. All diese subtilen Unterschiede können durch die jQuery-Internationalisierung-Plug-in automatisch verarbeitet werden.

Es kann sehr schwierig, den richtigen Termin zu bekommen sein. Verschiedene Kulturen verwenden verschiedene Kalender, wie der Gregorianische Kalender und den Kalender. Die gleiche Kultur können auch mehrere Kalender, wie Japan unter Verwendung des gregorianischen Kalenders und der Chronologie berechnet, indem der Kaiser Jahreszahl. Das Plug-in bietet eine Funktion, um Daten miteinander in alle diese Kalender konvertieren.

Die Verwendung von Sprachtags

Internationalisierung der JQuery-Plugins erkennen Kultur basiert auf sprach-Tags definiert in RFC 4646 und RFC 5646 Standards (siehe http://tools.ietf.org/html/rfc5646), die in der Regel mehrere zusätzliche Tags wie z. B. durch Bindestriche, kombinieren:

Sprachenname Markup Language (Chinesisch)

En-AU Englisch (Australien)

De-BZ Englisch (Belize)

En-CA Englisch (Kanada)

ID-Indonesisch

ZH-CHS chinesische (vereinfacht)-Tags sind nicht mehr gebräuchlich

Zu Zu-Wen

Beachten Sie, dass eine Sprache wie Englisch, mehrere sprach-Tags gleichzeitig haben kann. In der Englisch-sprachigen Ländern verwendet Kanada ein anderes Datum, Zahl und Währung Format als Australien oder den USA. Das Sprachensiegel Lookup Tool unten können Sie um einen Sprache-Marker für eine Kultur zu bekommen:

Http://rishida.NET/utils/subtags/

Ein Ordner namens Globinfo in der Internationalisierung der jQuery-Plug-in enthält Informationen über diese 350 Kulturen. In der Tat gibt es mehr als 700 Dateien in diesem Ordner, da es die Minimierung von jeder Datei (Minify) und die ursprüngliche Version enthält.

Beispielsweise im Ordner "Globinfo" die Datei jQuery.glob.en-AU.js entspricht Englisch (Australien), jQuery.glob.id.js entspricht Indonesisch und jQuery.glob.zh-CHS entspricht in vereinfachtes Chinesisch.

Beispiel: Angabe einer Kulturkreis

Angenommen Sie, Sie möchten, erstellen Sie eine Website von Devon und deutschen Gewohnheiten in den Client JavaScript-Skript verwenden, um alle Termine, Währungssymbole und Zahlen anzeigen möchten. Der Quellcode für diese Seite möglicherweise ähnlich dem folgenden HTML-Code:

Beachten Sie die Span-Tags vor, die alle Bereiche zu identifizieren, die mit internationalisierten Plug-ins formatiert werden müssen: der Preis des Artikels, das Datum, an dem Regal, und die Menge der Vorräte.

Um die jQuery-Internationalisierung-Plug-in auf einer Webseite zu verwenden, müssen Sie drei JavaScript Dateien hinzufügen: die jQuery-Bibliothek, die jQuery-Internationalisierung-Plug-in und die angegebenen kulturellen Gewohnheiten-Informationen:

Im obigen Beispiel statisch werde ich die jQuery.glob.de-DE.js-Datei mit den deutschen kulturellen Gewohnheiten auf der Web-Seite hinzufügen, "de-DE" ist eine Sprache-Markierung, die die deutsche verwendet in Deutschland darstellt.

Nun, da Sie die erforderlichen Skriptdateien eingeführt haben, können die folgenden Client JavaScript-Code Sie das Plug-in um den Preis, das Datum auf dem Regal und das entsprechende Inventar anzeigen aufrufen:

Die jQuery-Internationalisierung-Plug-in wird die jQuery-Bibliothek, einschließlich neue Funktionen wie (PreferCulture) und Format () einige neue Funktionen hinzugefügt. Die PreferCulture ()-Funktion können Sie legen Sie die Standardkultur verwendet, wenn andere in das Plugin Funktionsaufrufe. Die PreferCulture ()-Funktion akzeptiert einen Sprache-Marker als Parameter, der die Kultur am nächsten an der Sprache-Marker verwendet.

$.format ()-Funktion wird wirklich zur Währung, Datums- und Zahlenformate zu orchestrieren. Der zweite Parameter von $.format ()-Funktion ist die Format-Klassifizierung. Weitergabe in "C" zeigt beispielsweise an, dass die Parameterwerte von Währungsformat choreographiert sind. Die Bedeutung, die vertreten durch alle Format Klassifikatoren ist ausführlich in Githums-ReadMe-Datei beschrieben: http://github.com/nje/jquery-glob

Wenn wir diese Seite im Browser öffnen, erscheint alles korrekt gemäß deutschen Gewohnheiten. Das Währungssymbol verwendet das Euro-Symbol, das Datum ist das Datum und Monat Name in Deutsch und das numerische Trennzeichen verwendet einen Punkt (.), kein Komma (,).

Über diese Methoden erfahren Sie durch Ausführen der 3_GermanSite.htm-Datei in der Probe-Download.

Beispiel: Benutzer wählt dynamisch ein Gebietsschema

Im vorherigen Beispiel angegeben wir ausdrücklich die Verwendung des deutschen kulturellen Gewohnheiten (durch Verweis auf die Datei jQuery.glob.de-DE.js). Schauen wir uns nun ein paar Beispiele für dynamische Einstellung der kulturellen Gepflogenheiten an.

Zum Beispiel wollen wir eine Drop-Down-Box auf der Seite hinzufügen, die alle 350 Kulturen enthält, und wenn der Benutzer eine Kultur im Feld Dropdown-Liste auswählt, werden alle Daten auf der Seite nach den Gewohnheiten der Kultur angezeigt.

Dies ist der HTML-Quellcode für die Web-Seite:

Denken Sie daran, dass die Datum-haltigen Termine eine Daten-Date-Eigenschaft (Daten-* Eigenschaft ist eine neue Funktion in HTML 5 und kann auch auf älteren Browsern verwendet werden). Wenn der Benutzer eine kulturelle Botschaft im Feld Dropdown-Liste auswählt, wird unser Code das Datum gespeichert, in der Daten-Date-Eigenschaft formatieren.

Um alle möglichen kulturellen Informationen anzuzeigen, müssen wir eine Datei namens jQuery.glob.all.js wie folgt hinzufügen.

Die jQuery-Internationalisierung-Plug-in hat eine Datei namens jQuery.glob.all.js, die die Internationalisierung Informationen von mehr als 350 Kulturen unterstützt durch alle Plug-ins enthält. Auch nach minimale Verarbeitung sind noch 367 k Byte. Da die Datei groß ist, es sei denn, Sie brauchen, um all diese kulturelle Informationen auf einmal verwenden, wird empfohlen, dass Sie nur die JavaScript-Datei, die entspricht der kulturellen Informationen hinzufügen, die du verwendest. Im nächsten Beispiel zeige ich Ihnen, wie man eine JavaScript-Datei für eine Sprache in einer Webseite dynamisch zu laden.

Als nächstes fügen Sie alle kulturellen Namen in die Liste im Feld Dropdown-Liste unterstützt. Sie können sie mit der $.cultures-Eigenschaft erhalten:

Schließlich schreiben Sie ein paar mehr Zeilen Code zu erfassen und formatieren Sie die Termine der Bezugsdatum Eigenschaften in jeder Beschriftung:

Die ParseDate ()-Funktion in der jQuery-Internationalisierung-Plug-in wandelt das Datum einer Zeichenfolge auf das JavaScript-Datum, während die Format ()-Funktion verwendet wird, um die Formatierung von diesen Terminen zu orchestrieren. Die Format-Klassifikator für "D" bedeutet, dass das Datum choreographiert ist ein langes Datumsformat verwenden.

Jetzt, solange die Seitenansicht einer dieser 350 Sprachen auswählt, werden die Inhalte korrekt internationalisiert. Über diese Methoden erfahren Sie durch Ausführen der 4_SelectCulture.htm-Datei in der Probe-Download.

Beispiel: Dynamisch laden Dateien internationalisiert

Wie Sie im vorherigen Abschnitt erwähnt, sollten Sie versuchen zu vermeiden, verweisen auf die jQuery.glob.all.js-Datei auf der Seite, weil es einfach zu groß ist. Stattdessen laden Sie dynamisch die Internationalisierung-Informationen, die Sie benötigen.

Sie möchten beispielsweise eine Dropdown Liste erstellen, die in den folgenden Sprachen angezeigt:

Der folgende Code wird ausgeführt, nachdem der Benutzer eine neue Sprache aus dem Dropdown-Listenfeld auswählt. Dieser Code bestimmt zunächst, ob die Internationalized-Skript-Datei entsprechend der gewählten Sprache geladen wurde. Wenn es noch nicht geladen wurde, wird die Skriptdatei Internationalized dynamisch geladen mithilfe der $.getScript ()-Funktion von jQuery.

Wenn eine internationalisierte Skript-Datei von einem Browser geladen wird, die GlobalizePage ()-Funktion genannt wird, die dann führt der Client-Code Vervollständigung Internationalisierung.

Der Vorteil dieses Ansatzes ist, dass es Ihnen erlaubt, zu vermeiden, laden die gesamte jQuery.glob.all.js Datei nur die verwendeten Dateien laden und laden Sie sie nur einmal.

Die 5_Dynamic.htm-Datei in der Probe Download veranschaulicht diesen Ansatz.

Beispiel: Erkennt automatisch gemeinsame Spracheinstellungen für Benutzer

Die meisten Websites Browsereinstellungen des Benutzers verwenden, um ihre gemeinsame Sprache zu bekommen und dann den Inhalt der Website basierend auf dieser Sprache und kulturellen Brauch zu internationalisieren. Benutzer können eine gemeinsame Sprache im Browser einrichten. Auf diese Weise, wenn der Benutzer die Seite anfordert sind die gemeinsame Spracheinstellungen im Feld Accept-Language, die Nachrichtenkopf http-Anfragen enthalten.

Wenn Sie Microsoft INTERNET EXPLORER verwenden, können Sie Ihre bevorzugten Sprachen einrichten, indem Sie folgende Schritte:

1. in der Menüleiste wählen Sie Extras, Internetoptionen.

2. Wählen Sie die Registerkarte "allgemeine".

3. Klicken Sie auf Sprache, in der Erscheinung.

4. Klicken Sie auf Hinzufügen in der Liste Sprache eine neue Sprache hinzufügen.

5. Legen Sie Ihre am häufigsten verwendeten Sprache an der Spitze der Liste.

Sie können mehrere gemeinsame Sprachen in diesem Dialogfeld einrichten. Die sequenzielle Beziehung der Sprache gesetzt wird im Feld "Accept-Language" der HTTP-Anforderung, wie z. B. zum Ausdruck:

Akzeptieren-Sprache: fr-fr,-Id-Id; Q = 0.7, de-uns; Q = 0,3

Seltsam genug, können sich Benutzer nicht zu Accept-Language Content durch den Client JavaScript-Skript. Microsofts Internet Explorer und Firefox Browser unterstützen vielfältige sprachliche Eigenschaften Diese Eigenschaften wie windows.navigator.browserLanguage und window.navigator.language, über Window.navigator, zugegriffen werden können, aber die Sprachen in diesen Eigenschaften in der Regel beziehen sich auf die Sprache des Betriebssystems oder durchsuchen Die Sprachversion des Geräts. Sie können nicht diese Eigenschaften verwenden, um die gemeinsame Sprache, die vom Benutzer festgelegte kommen.

Die einzige zuverlässige Möglichkeit, Benutzer-Sprache-Einstellungen (d. h. Inhalte im Feld Accept-Language) zu bekommen ist, Server-Code zu schreiben. Zum Beispiel Die folgende ASP.NET-Seite nutzt die Servereigenschaften Request.UserLanguages Spracheinstellungen des Benutzers auf die AcceptLanguage Variablen der Client JavaScript zuweisen (die dann über den JavaScript-Client zugegriffen werden kann):

Damit dieser Code ordnungsgemäß funktioniert muss die Seite kulturelle Informationen zu AcceptLanguage enthalten. Beispielsweise wenn Ihre gemeinsame Sprache fr-FR (Französisch-France) ist, Sie müssen jQuery.glob.fr-FR.js oder jQuery.glob.all.js einer dieser zwei JavaScript-Skripte auf dieser Seite verweisen, ansonsten werden Sie nicht in der Lage, kulturelle Informationen zu erhalten. Die Anwendung dieser Methode kann als Beispiel für die "6_AcceptLanguages.aspx" im Download verwendet werden.

Besteht keine entsprechende Skript für gemeinsame Sprache des Benutzers auf der Seite, die ihre kulturelle Informationen enthält, verweist dann die $.preferCulture ()-Methode neutral (neutral) kulturelle Informationen (zum Beispiel, Verwenden Sie jQuery.glob.fr.js anstelle von jQuery.glob.fr-FR.js). Wenn auch neutrale kulturelle Informationen nicht verfügbar ist, setzt die $.preferCulture ()-Methode zurück um die Standardkultur (Englisch) zu verwenden.

Beispiel: Internationalisierung der Verwendung von JQuery UI DatePicker-Plugins internationalisiert

Eines der Ziele der internationalisierten Plug-ins ist zu erleichtern, jQuery Gadgets zu entwickeln, die eine Vielzahl von Kulturen anpassen können.

Wir wollen sicherstellen, dass jQuery internationalisierte Plug-ins koexistieren und ordnungsgemäß mit bestehenden jQuery UI-Plug-ins wie DatePicker. Um dies zu erreichen, haben wir eine integrierte Version der DatePicker-Plug-in, mit dem es Plug-ins zur internationalen Unterstützung beim Rendern von Kalender nutzen kann. Die folgende Abbildung zeigt die Wirkung von jQuery Plugin internationalisiert ist das Hinzufügen und das konsolidierte DatePicker-Plug-in auf der Seite und wählen Sie Indonesisch.

Hinweis: Die Namen der jeden Tag der Woche werden in abgekürzter Form in Indonesisch angezeigt. Darüber hinaus zeigt der Name des Monats auch Indonesisch.

Sie können die konsolidierte Fassung der JQuery UI DatePicker von unserem GitHub-Website herunterladen. Sie können auch die Version in der Probe Download Datei 7_DatePicker.htm verwendet.

Fassen Sie zusammen

Wir freuen uns, einen laufenden Beitrag in der jQuery-Gemeinschaft anbieten zu können. Dieses internationalisierte Plugin ist bereits die dritte Plug-in, die wir veröffentlicht haben.

Vielen Dank für die vielen wertvollen Rückmeldungen und Design Vorschläge haben wir unser Prototyp des jQuery Vorlage (Template) und Data Link (Verknüpfung von Daten) zu Beginn des Jahres. Zu guter Letzt möchte ich an dieser Stelle danke dem jQuery und jQuery UI Teams für ihre Hilfe bei der Erstellung dieser Plug-ins.

Ich hoffe, dies wird Ihnen helfen.

Original: http://blog.joycode.com/scottgu/archive/2010/06/25/116006.joy