Prototype de l’internationalisation de jQuery nouveau plug-in

Le mois dernier, j’ai écrit un article sur comment Microsoft estJQueryContribué au code de l’article, également parlé de certaines des fonctionnalités dans le code qui a contribué dans le premier lot : jQuery templates et données liant le soutien.

Aujourd'hui, nous avons sorti un prototype d’une nouvelle internationalisation de jQuery plug-in que vous pouvez consulter dans votre programme JavaScript pour ajouter des fonctionnalités d’internationalisation. Le plug-in couvre les informations internationales sur plus de 350 cultures, du gaélique écossais, Friesland, hongrois, japonais/anglais canadien. Plug-ins sera publié en open source.

Vous pouvez télécharger la version prototype du plug-in de base de notre code Github :

Http://github.com/NJe/jQuery-glob

Vous pouvez également télécharger quelques exemples ici pour en savoir plus sur son utilisation simple.

Internationalisation de compréhension

Internationalisation de JQuery plug-ins permettent de manipuler facilement les numérique, monétaire et des formats de date entre les cultures en code JavaScript. Par exemple, vous pouvez utiliser ce plugin pour afficher correctement le symbole monétaire du pays :

Vous pouvez également utiliser ce plugin pour orchestrer le format de date, alors que la date et le mois sont affichés dans l’ordre correct, et le nom de la date et le mois peut être traduit correctement :

Notez que dans le format de date arabe ci-dessus, l’année est affichée en 1431. C’est parce que l’année a été transformée sous la forme d’un calendrier.

Certaines différences culturelles sont plus prononcées, telles que l’utilisation des différentes monnaies ou les noms de mois différents. Mais d’autres différences sont subtiles et inattendues. Par exemple, dans certaines cultures, les numéros ne sont pas regroupés de manière équilibrée. Dans une culture marquée « te-IN » dans la langue (Telugu dans le nord-est de l’Inde), les numéros sont regroupés par 3 chiffres et regroupées puis tous les 2 chiffres. En conséquence, le nombre 1 million sera écrit comme « 10,00,000 ». Certaines cultures, d’autre part, ne pas les numéros de groupe du tout. Toutes ces différences subtiles peuvent être gérées automatiquement par l’internationalisation de jQuery plug-in.

Il peut être très délicat obtenir la bonne date. Différentes cultures utilisent différents calendriers, tels que le calendrier grégorien et le calendrier. La même culture peut également utiliser plusieurs calendriers, tels que le Japon à l’aide du calendrier grégorien et la chronologie calculée par le nombre d’année empereur. Le plug-in fournit une fonction pour convertir des dates les uns aux autres dans l’ensemble de ces calendriers.

À l’aide de balises de langue

Internationalisation de JQuery plugins reconnaissent culture basée sur des balises de langue définis dans les normes RFC 4646 et RFC 5646 (voir http://tools.ietf.org/html/rfc5646), qui généralement se combinent plusieurs balises auxiliaires par des traits d’Union, tels que :

Nom de Markup Language langage (chinois)

Fr-AU anglais (Australie)

Fr-BZ anglais (Belize)

Fr-CA anglais (Canada)

ID Indonésie

Zh-CHS Chinese (Simplified)-tags ne sont plus en cours d’utilisation

Zu zu-Wen

Notez qu’une seule langue, comme l’anglais, peut avoir plusieurs balises de langue en même temps. Dans ces mêmes pays anglophones, le Canada utilise un format nombre, monétaire et date différent en Australie ou aux États-Unis. Vous pouvez utiliser l’outil de recherche d’étiquette de langue ci-dessous pour obtenir un marqueur de langue d’une culture :

Http://rishida.net/utils/subtags/

Un dossier appelé Globinfo dans l’internationalisation de jQuery plug-in contient des informations sur ces 350 cultures. En fait, il y a plus de 700 fichiers dans ce dossier parce qu’il inclut la réduction au minimum de chaque fichier (rapetisser) et la version originale.

Par exemple, dans le dossier Globinfo, le fichier jQuery.glob.en-AU.js correspond à l’anglais (Australie), jQuery.glob.id.js correspond à l’indonésien, et jQuery.glob.zh-CHS correspond au chinois simplifié.

Exemple : Spécifier une Culture

Supposons que vous souhaitez créer un site de Devon et à utiliser les habitudes allemandes dans script JavaScript du client pour afficher toutes les dates, les symboles monétaires et nombres. Le code source de la page peut être semblable au code HTML suivant :

Remarque les balises span ci-dessus, qui servent à identifier toutes les zones qui ont besoin d’être formatée avec les plug-ins : le prix de l’article, la date sur le plateau et le montant de l’inventaire.

Pour utiliser l’internationalisation de jQuery plug-in sur une page Web, vous devez ajouter trois fichiers JavaScript : la bibliothèque jQuery, l’internationalisation de jQuery plug-in et l’information des habitudes culturelles spécifié :

Dans l’exemple ci-dessus, je vais ajouter statiquement le fichier jQuery.glob.de-DE.js, contenant les habitudes culturelles allemandes à la page Web, « de-DE » est un marqueur de langue qui représente l’allemand utilisé en Allemagne.

Maintenant que vous avez introduit les fichiers de script nécessaire, vous pouvez utiliser le client suivant code JavaScript pour appeler le plug-in pour afficher le prix, la date sur le plateau et l’équivalent de l’inventaire :

L’internationalisation de jQuery plug-in ajoute quelques nouvelles fonctions jQuery bibliothèque, y compris nouvelles fonctions telles que preferCulture () et format (). Vous pouvez utiliser la fonction preferCulture pour définir la culture par défaut utilisée lorsque d’autre fonction appelle pour le plug-in. La preferCulture () la fonction accepte un marqueur de langue comme un paramètre qui utilise le plus proche du marqueur de langue de la culture.

La fonction de () $.format sert vraiment d’orchestrer la monnaie, date et formats numériques. Le deuxième paramètre de la fonction de () $.format est le classificateur de format. Par exemple, le passage de « C » indique que les valeurs des paramètres sont chorégraphiées par style de monnaie. Le sens représenté par tous les classificateurs de format est décrit en détail dans le fichier ReadMe de Githum : http://github.com/nje/jquery-glob

Quand nous ouvrons cette page dans le navigateur, tout s’affiche correctement conformément aux habitudes de l’allemands. Le symbole monétaire utilise le symbole de l’euro, la date est le nom date et mois en allemand et le séparateur numérique utilise un point (.), pas une virgule (,).

Vous pouvez apprendre sur ces méthodes en exécutant le fichier 3_GermanSite.htm dans le téléchargement d’exemple.

Exemple : L’utilisateur sélectionne dynamiquement les paramètres régionaux

Dans l’exemple précédent, nous avons spécifié explicitement l’utilisation de certaines habitudes culturelles allemandes (en référençant le fichier jQuery.glob.de-DE.js). Maintenant regardons quelques exemples de réglage dynamique des habitudes culturelles.

Par exemple, nous avons l’intention d’ajouter une liste déroulante sur la page qui contient toutes les 350 cultures, et lorsque l’utilisateur sélectionne une culture dans la zone de liste déroulante, toutes les dates sur la page sont affichent selon les habitudes de la culture.

C’est le code source HTML de la page Web :

N’oubliez pas que toutes les dates date contenant ont une propriété de données-date (le Data-* propriété est une nouvelle fonctionnalité dans HTML 5 et peut également être utilisée sur les navigateurs plus anciens). Lorsque l’utilisateur sélectionne un message culturel dans la zone de liste déroulante, notre code formate la date enregistrée dans la propriété de données à jour.

Afin d’afficher toutes les informations culturelles possibles, nous devons ajouter un fichier appelé jQuery.glob.all.js comme suit.

L’internationalisation de jQuery plug-in a un fichier appelé jQuery.glob.all.js, qui contient les informations de l’internationalisation de plus de 350 cultures prises en charge par tous les plug-ins. Même après un traitement minimal, il y a toujours des 367 k octets. Parce que le fichier est volumineux, à moins que vous n’avez pas à utiliser toutes ces informations culturelles en même temps, nous recommandons que vous ajoutez uniquement le fichier JavaScript qui correspond à l’information culturelle que vous utilisez. Dans l’exemple suivant, je vais vous montrer comment charger dynamiquement un fichier JavaScript d’une langue dans une page Web.

Ajoutez ensuite que tous pris en charge culturelles noms à la liste dans la zone de liste déroulante. Vous pouvez les obtenir avec la propriété .cultures $:

Enfin, écrire quelques lignes de code pour capturer et formater les dates des propriétés données à jour dans chaque étiquette span :

La fonction de () parseDate à l’intérieur de l’internationalisation de jQuery plug-in convertit la date d’une chaîne à la date de JavaScript, tandis que la fonction de () de format est utilisée pour orchestrer la mise en forme de ces dates. Le classificateur de format « D » indique que la date est chorégraphiée utilisant un format de date longue.

Maintenant, tant que la visionneuse de page permet de sélectionner un de ces 350 langues, le contenu sera correctement internationalisé. Vous pouvez apprendre sur ces méthodes en exécutant le fichier 4_SelectCulture.htm dans le téléchargement d’exemple.

Exemple : Fichiers d’internationalisation chargeant dynamiquement

Comme vous le dites dans la section précédente, vous devriez essayer d’éviter de référencer le fichier jQuery.glob.all.js sur la page parce que c’est tout simplement trop grand. Au lieu de cela, vous pouvez charger dynamiquement les informations d’internationalisation dont vous avez besoin.

Par exemple, vous souhaitez créer une liste déroulante qui affiche les langues suivantes :

Le code suivant s’exécute après que l’utilisateur sélectionne une nouvelle langue dans la liste déroulante. Tout d’abord, copiez le code suivant détermine si le fichier de script internationalisées correspondant à la langue sélectionnée a été chargé. Si elle n’a pas encore été chargé, le fichier de script internationalisées est chargé dynamiquement à l’aide de la fonction de () $.getScript de jQuery.

Lorsqu’un fichier de script internationalisé est chargé par un navigateur, la fonction globalizePage est appelée, qui puis exécute le code du client afin de compléter l’internationalisation.

L’avantage de cette approche est qu’il te permet d’éviter chargement que fichier l’ensemble jQuery.glob.all.js-just charge les fichiers utilisés et les charger qu’une seule fois.

Le fichier 5_Dynamic.htm dans le téléchargement d’exemple illustre cette approche.

Exemple : Détecte automatiquement les paramètres de langue commune pour les utilisateurs

La plupart des sites utilisent les paramètres du navigateur de l’utilisateur pour obtenir leur langue commune et puis s’internationaliser le contenu du site basé sur cette langue et de la coutume culturelle. Les utilisateurs peuvent définir une langue commune dans le navigateur. De cette façon, lorsque l’utilisateur demande la page, les paramètres de langue commune sont inclus dans le champ Accept-Language qui demande à l’en-tête du message HTTP.

Si vous utilisez Microsoft INTERNET EXPLORER, vous pouvez configurer vos langues préférées en procédant comme suit :

1. dans la barre de menus, sélectionnez outils, options Internet.

2. Sélectionnez l’onglet général.

3. Cliquez sur le bouton de langue dans l’apparence.

4. Cliquez sur ajouter dans la liste langue pour ajouter une nouvelle langue.

5. puis placez votre langue plus couramment utilisé en haut de la liste.

Vous pouvez configurer plusieurs langages communs dans cette boîte de dialogue. La relation séquentielle de la langue définie qui figurera dans le champ Accept-Language de la requête HTTP, telles que :

Accepter-langue : fr-fr, id-id ; q = 0,7, en-us ; q = 0,3

Curieusement, les utilisateurs ne sont pas en mesure d’obtenir le champ Accept-Language content via script JavaScript du client. Microsoft IE et Firefox navigateurs prennent en charge une gamme de propriétés liées à la langue, Ces propriétés sont accessibles par le biais de Window.navigator, comme windows.navigator.browserLanguage et window.navigator.language, mais les langues dans ces propriétés renvoient généralement à la langue définie dans le système d’exploitation ou pour parcourir La version de langue de l’appareil. Vous ne pouvez pas utiliser ces propriétés pour venir à la langue commune définie par l’utilisateur.

La seule méthode fiable pour obtenir les préférences de langue de l’utilisateur (c'est-à-dire, contenu dans le champ Accept-Language) consiste à écrire du code serveur. Par exemple La page ASP.NET suivante tire parti des propriétés Request.UserLanguages du serveur pour affecter les préférences de langue de l’utilisateur aux variables acceptLanguage du client JavaScript (qui est alors accessibles via le client JavaScript) :

Afin que ce code fonctionne correctement, la page doit contenir des informations culturelles correspondant à acceptLanguage. Par exemple, si votre langage commun est fr-FR (Français-France), vous devez référencer FR.js-jQuery.glob.fr ou jQuery.glob.all.js l’un de ces deux scripts JavaScript sur cette page, sinon vous ne serez pas en mesure d’obtenir des informations culturelles. L’application de cette méthode peut être utilisée comme un exemple de la « 6_AcceptLanguages.aspx » dans le téléchargement.

S’il n’y a aucun script correspondant pour la langue commune de l’utilisateur dans la page qui contient l’information culturelle, puis la méthode de () $.preferCulture référence neutres (neutres) d’informations culturelles (par exemple, Utilisez jQuery.glob.fr.js au lieu de jQuery.glob.fr-FR.js). Si des informations culturelles neutres estégalement également indisponibles, puis la méthode de () $.preferCulture restaure pour utiliser la culture par défaut (anglais).

Exemple : L’internationalisation de l’utilisation de JQuery UI DatePicker internationnal plug-ins

Un des buts d’internationalisé plug-ins est de rendre plus facile à développer des gadgets de jQuery qui peuvent s’adapter à une variété de cultures.

Nous voulons s’assurer plugins internationalisé de que jQuery coexistent et fonctionne correctement avec existant jQuery UI plug-ins comme sélecteur de dates. Pour ce faire, nous avons créé une version intégrée de DatePicker plug-in qui lui permet de tirer parti de nos plug-ins pour fournir un soutien international lors du rendu des calendriers. L’illustration suivante montre l’effet d’ajouter jQuery d’internationnal plug-in et le DatePicker consolidé plug-in à la page et en sélectionnant indonésien.

Remarque : Les noms de tous les jours de la semaine sont affichés sous forme abrégée en indonésien. En outre, le nom du mois est également montré en indonésien.

Vous pouvez télécharger la version consolidée du JQuery UI DatePicker depuis notre site GitHub. Vous pouvez également utiliser la version utilisée dans l’échantillon téléchargement fichier 7_DatePicker.htm.

Résumer

Nous sommes heureux d’être en mesure de fournir une contribution permanente à la communauté jQuery. Ce plugin internationalisé est déjà le troisième plug-in, nous avons publié.

Merci pour les nombreuses suggestions précieuses de rétroaction et conception, nous avons fourni pour notre prototype du modèle de jQuery (templates) et Data Link (liaison de données) au début de l’année. Enfin, je tiens à saisir cette occasion pour remercier les jQuery UI équipes pour leur aide dans la création de ces plug-ins et jQuery.

J’espère que cela vous aidera.

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