Prototype of the new jquery internationalization plug-in

Web page Production WEBJX article introduction: the newly released jquery internationalization plugin.

The jquery internationalization plug-in allows you to easily handle digital, currency, and date formats between different cultures in JavaScript code. For example, you can use this plugin to correctly display a country's currency symbol

Last month, I wrote an article about how Microsoft is contributing to jquery , as well as some of the features in the first batch of contributing code: jQuery templates and Data link support.

Today, we have released a prototype of a new jquery internationalization plug-in that you can use to add internationalization functionality to your JavaScript program. Plug-ins cover more than 350 cultures of international information, from Scottish Gaelic, Friesland, Hungarian, Japanese to Canadian English and so on. The plugin will be published in open source form.

You can download the prototype version of the plugin from our GitHub code base:

Http://github.com/nje/jquery-glob

You can also download some examples here to understand the simple usage.

Understanding Internationalization

The jquery internationalization plug-in allows you to easily handle digital, currency, and date formats between different cultures in JavaScript code. For example, you can use this plugin to correctly display a country's currency symbol:

You can also use this plugin to format dates so that dates and months are displayed in the correct order, and the names of dates and months can be translated correctly:

Note that in the date format of the figure Arabic above, the year is shown as 1431. This is because the year has been converted in the form of the Hijri calendar.

Some cultural differences are obvious, such as using different currencies or different month names. But other differences are subtle and unexpected. For example, in some cultures, numbers are not grouped in a balanced way. In a culture marked as "te-in" (Telugu in eastern India), numbers are grouped by 3 digits and then grouped by 2 digits. So like the number 1 million (1000000) it will be written "10,00,000". And some cultures do not group numbers at all. All of these nuances can be handled automatically by the jquery internationalization plug-in.

It may be very tricky to get the right date. Different cultures use different calendars, such as the Gregorian calendar and the Hijri calendar. The same culture may also adopt multiple calendars, such as the Gregorian calendar and the annals of the Emperor's reign, which are used in Japan. Plug-ins provide functions to convert dates into each of these calendars.

Using language tags

The jquery internationalization plug-in recognizes culture according to the language tags defined in the RFC 4646 and RFC 5646 standards (see http://tools.ietf.org/html/rfc5646), and language tags are usually composed of multiple auxiliary tags by hyphens, such as:

Language Markup Language name (Chinese)

En-au English (Australia)

EN-BZ English (Belize)

EN-CA English (Canada)

Id Indonesian text

Zh-chs Chinese (Simplified)-mark no longer used

Zu zu Lu Wen

Note that a single language, such as English, can have more than one language tag at a time. In the same English-speaking countries, the number, currency and date formats used in Canada are different from those of Australia or the United States. You can use the following language Tag Finder tool to get the language tags of a culture:

http://rishida.net/utils/subtags/

A folder called Globinfo in the jquery internationalization plug-in contains information about these 350 cultures. In fact, there are more than 700 files in this folder, because it includes the minimized (Minify) and original versions of each file.

For example, in the Globinfo folder, the file jquery.glob.en-au.js corresponds to English (Australia), jQuery.glob.id.js corresponds to Indonesian, and jquery.glob.zh-chs corresponds to Simplified Chinese.

Example: Specifying a Culture

If you want to create a German web site and want to use German in the client's JavaScript script, display all dates, currency symbols, and numbers. The source code for that page might resemble the following HTML:

Note the span labels above, which identify all areas that need to be formatted with internationalized Plug-ins: The price of the commodity, the date of the shelf, and the amount of inventory.

To use the jquery internationalization plugin on your Web page, you need to add three JavaScript files: the jquery library, the jquery internationalization plugin, and the specific cultural habits information:

In the previous example, I statically added a jquery.glob.de-de.js file containing German cultural habits to the Web page, "De-de" is a language tag that represents German used in Germany.

Now that you have introduced the necessary script files, you can use the following client-side JavaScript code to invoke the plug-in to display the price, the date of the shelf, and the amount of inventory equivalent:

The jquery internationalization plug-in adds new functions to the jquery function library-including preferculture () and new functions such as format (). You can use the Preferculture () function to set the default culture used when other functions are called by the plug-in. The Preferculture () function takes a language tag as an argument, and this function uses the culture closest to the language tag.

The $.format () function is really used to format money, dates, and numbers. The second parameter of the $.format () function is the format classifier. For example, passing in "C" means that the value of the parameter is formatted in currency style. In Githum's readme file, the meaning of all format classifier representations is described in detail: http://github.com/nje/jquery-glob

When we open this page in the browser, all things are displayed correctly according to the German custom. The currency symbol takes the euro symbol, the date is in German and the date and month name, and the number separator is a dot (.), not a comma (,).

You can learn the above method by running the 3_germansite.htm file in the sample download.

Example: A user dynamically selects a regional setting

In the previous example, we explicitly specified the use of German cultural practices (by referencing jquery.glob.de-de.js files). Let's now look at a few examples of dynamic cultural habits.

For example, we're going to add a drop-down box with all 350 cultures on the page, and when the user chooses a culture in the dropdown box, all the dates on the page are displayed according to the culture's custom.

This is the HTML source code for the Web page:

Note that all <span> tags that contain dates have a data-date attribute (the Data-* property is a new feature in HTML 5 and can also be used on older browsers). After the user has selected a cultural message in the dropdown box, our code will format the date saved in the Data-date property.

To show all possible cultural information, we need to add a file called JQuery.glob.all.js as follows.

The jquery internationalization plug-in has a file called JQuery.glob.all.js, which contains the internationalization information of more than 350 cultures supported by all plug-ins. Even with minimal processing, there are 367k of bytes. Because the files are large, unless you do need to use all of these cultural information at once, we recommend that you add only JavaScript files for the cultural information you use. In the next example, I'll show you how to dynamically load JavaScript files for a language in a Web page.

Next, add all the supported culture names to the list in the dropdown box. You can get them using the $.cultures property:

Finally, write a few lines of code to grab the date of the Data-date attribute in each span label and format it:

The Parsedate () function in the jquery internationalization plug-in converts the date of a string into a JavaScript date, while the format () function is used to format the dates. The format classifier for "D" indicates the date is formatted using a long date format.

Now, as long as the page viewer chooses one of these 350 languages, the content will be correctly internationalized. You can learn the above method by running the 4_selectculture.htm file in the sample download.

Example: Dynamically loading internationalized files

As mentioned in the previous section, you should try to avoid referencing jQuery.glob.all.js files on the page because it is too big. Instead, you can dynamically load the internationalization information you need.

For example, you would create a drop-down list to display the following languages:

The following code executes after the user selects a new language from the Drop-down box. This code first determines whether the Internationalized script file for the selected language has already been loaded. If it is not yet loaded, the internationalized script file is loaded dynamically with the $.getscript () function of jquery.

When the internationalized script file is loaded by the browser, the Globalizepage () function is invoked, followed by the execution of the client's code internationalization.

The advantage of this method is that it allows you to avoid loading the entire JQuery.glob.all.js file-just load the used file and load it only once.

The 5_dynamic.htm file in the sample download demonstrates this method.

Example: Automatically detects common language settings for a user

Most websites get their common language by detecting the user's browser settings, and then internationalize the Web site based on the language and cultural habits. Users can set up a common language in the browser. This way, when a user requests a page, the common language settings are included in the Accept-language field of the request HTTP message header.

If you are using Microsoft's IE browser, you can use the following steps to set your favorite language:

1. Select Tools in the menu bar, Internet options.

2. Select the regular label.

3. Click the Language button in the appearance.

4. Click Add New language in the list of languages.

5. Then put your most commonly used language at the top of the list.

You can set up many common languages in this dialog box. The sequential relationship of the set language will be reflected in the Accept-language field of the HTTP request, such as:

accept-language:fr-fr,id-id;q=0.7,en-us;q=0.3

Oddly enough, the user cannot get Accept-language content from the client's JavaScript script. Microsoft's IE and Firefox browsers support a range of language-related attributes, These properties can be accessed through window.navigator, such as Windows.navigator.browserLanguage and Window.navigator.language, although the languages in these properties generally refer to the language set in the operating system or to the browse language version of the device. You cannot use these attributes to come to the user's common language settings.

The only reliable way to get the user's language preference (that is, the content in the Accept-language field) is to write the server code. For example The following ASP.net page uses the server's Request.UserLanguages attribute to assign the user's language preferences to the Acceptlanguage variables of the client JavaScript (and then access these values through the client Javascipt):

In order for this code to work correctly, the page must contain the cultural information corresponding to the acceptlanguage. For example, if your common language is fr-fr (French-French), you must refer to one of the two JavaScript scripts in jquery.glob.fr-fr.js or jQuery.glob.all.js on this page, otherwise you will not be able to get cultural information. The application of this method can be used as an example to download the "6_acceptlanguages.aspx".

If there is no script containing cultural information for the user's common language on the page, then the $.preferculture () method references neutral (neutral) cultural information (for example, Use jQuery.glob.fr.js instead of jquery.glob.fr-fr.js). If neutral cultural information is not available, then the $.preferculture () method is rolled back to the default culture (English).

Example: Internationalizing the jquery UI datepicker with internationalized plug-ins

One of the purposes of internationalized Plug-ins is to make it easier to develop jquery gadgets that adapt to a variety of cultures.

We want to make sure that the internationalized plug-ins for jquery can coexist and work properly with existing jquery UI plug-ins like DatePicker. To achieve this goal, we created a consolidated version of the DatePicker plug-in, enabling it to leverage our plug-ins to provide internationalization support when rendering the calendar. The following illustration shows the effect of adding jquery's Internationalized plug-in and the consolidated DatePicker plug-in to the page and choosing Indonesian.

Note: The names of each day of the week are displayed in an abbreviated form in Indonesian. In addition, the names of the months are also shown in Indonesian.

You can download the consolidated version of the jquery UI DatePicker from our GitHub website. You can also use the version used by the file 7_datepicker.htm in the sample download.

Summarize

We are delighted to be able to contribute to the jquery community. This internationalized plugin is already the third plugin we have released.

Thank you for a lot of valuable feedback and design suggestions for our early release of the jquery template (templating) and Data Link (data-linking) prototypes. Finally, I would like to take this opportunity to thank the jquery and jquery UI team for their help in creating these plug-ins.

I hope this will be of some help to you.

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