jQuery国际化插件 实例用法解析

理解国际化

jQuery国际化插件可让你在JavaScript代码中轻松地处理不一样文化之间的数字、货币和日期格式。例如，你可使用这个插件正确地显示一个国家的货币符号：

你也能够用这个插件编排日期格式，这样日期和月份会以正确的顺序显示，而日期和月份的名称也可以获得正确的翻译：

请注意上图阿拉伯的日期格式中，年份显示成了1431。这是由于年份已经按照回历的方式转换过了。

一些文化差别比较明显，例如使用不一样的货币或者不一样的月份名称等。但另一些差别却细微而又出人意料。例如，在有一些文化里，数字不是以均衡的方式分组的。在语言标记为“te-IN”的文化中（印度东部的泰卢固语），数字先按3位数字分组，而后再每2位数字分组。所以象数字一百万（1000000）就会被写成“10,00,000”。而有些文化就根本不对数字进行分组。全部这些细微的差别都可以被jQuery国际化插件自动处理。

要获得正确的日期可能很是须要技巧。不一样的文化采用不一样的历法，好比公历和回历。同一种文化也可能会采用多个历法，好比日本就同时采用公历和以天皇年号推算的纪年历。插件提供了函数将日期在全部这些历法中相互转换。

使用语言标记

jQuery国际化插件依据RFC 4646和RFC 5646标准里定义的语言标记来识别文化，语言标记一般由连字符将多个辅标签组合而成，好比：

en-AU	英文（澳大利亚）
en-BZ	英文（伯利兹）
en-CA	英文（加拿大）
Id	印度尼西亚文
zh-CHS	中文（简体）
Zu	祖鲁文

请注意单一语言例如英语能够同时有多个语言标记。同是英语国家，加拿大采用的数字、货币和日期格式就不一样于澳大利亚或者美国。你可使用下面的语言辅标签查找工具来获取某个文化的语言标记：http://rishida.net/utils/subtags/。

jQuery国际化插件里一个叫作globinfo的文件夹包含了这350种文化的信息。实际上，这个文件夹里有700多个文件，由于它包括了每一个文件的最小化（minify）和原始版本。好比说，在globinfo文件夹，文件jQuery.glob.en-AU.js对应英文（澳大利亚），jQuery.glob.id.js对应印度尼西亚文，而jQuery.glob.zh-CHS对应简体中文。

假如你要建立一个德文的网站，而且但愿在客户端的JavaScript脚本里使用德语习惯显示全部的日期、货币符号和数字。那页面的源代码也许与下面的HTML相似：

注意上面的span标签，它们标识了全部须要用国际化插件进行格式化的区域：商品的价格、上架的日期以及库存量。要在网页里使用jQuery国际化插件，须要添加三个JavaScript文件：jQuery库，jQuery国际化插件和指定的文化习惯信息：

在上例中，我将包含了德语文化习惯的jQuery.glob.de-DE.js文件静态地加入到网页中，”de-DE”是语言标记，表示在德国使用的德语。既然已经引入了必要的脚本文件，就可使用下面的客户端JavaScript代码调用插件来显示价格、上架的日期以及库存量等值：

jQuery国际化插件为jQuery函数库添加了一些新的函数—包括preferCulture()和format()等新函数。你能够经过preferCulture()函数设置插件其余函数调用时使用的默认文化。preferCulture()函数接受一个语言标记做为参数，这个函数会使用最接近这个语言标记的文化。

$.format()函数才是真正用来编排货币、日期和数字格式的。$.format()函数的第二个参数是格式分类符。例如，传入“c”表示按货币的样式编排参数值。在githum的ReadMe文件里详细描述了全部格式分类符表明的意思：http://github.com/nje/jquery-glob。

当咱们在浏览器打开这个页面的时候，全部的东西都是按照德语习惯正确显示。货币符号采用的是欧元符号，日期采用德语的日期和月份名称，而且，数字分隔符用的是点号（.），而不是逗号（,）。

你能够经过运行示例下载中的3_GermanSite.htm文件来了解上述方法。

示例：用户动态选择一个区域设置

在前面的例子中，咱们显式指定使用德语文化习惯（经过引用jQuery.glob.de-DE.js文件）。咱们如今来看看动态设置文化习惯的几个例子。好比说咱们打算在页面上加一个包含全部350种文化的下拉框，当用户在下拉框里选择了一个文化，页面上全部的日期都按照这个文化的习惯显示。

这是网页的HTML源代码：

请留意全部包含了日期的<span>标签都有一个data-date属性（data-*属性是HTML 5里的新功能，同时在老的浏览器上也可使用）。当用户在下拉框里选择了一个文化信息后，咱们的代码将会格式化data-date属性里保存的日期。为了显示全部可能的文化信息，咱们要象下面这样添加一个叫jQuery.glob.all.js 的文件。

jQuery国际化插件里有一个叫作jQuery.glob.all.js的文件，这个文件包含了全部插件支持的350多种文化的国际化信息。即便通过最小化处理，仍是有367k字节。因为文件很大，除非你的确须要一次性使用全部这些文化信息，咱们建议你只添加所使用到的文化信息对应的JavaScript文件。下一个例子中，我会演示如何在网页中动态地加载某个语言对应的JavaScript文件。

下一步，把全部支持的文化名称添加到下拉框的列表里。能够用$.cultures这个属性获取它们：

最后，再写几行代码把每一个span标签里的data-date属性的日期都抓出来并编排格式：

jQuery国际化插件里面的parseDate()函数将一个字符串的日期转换成JavaScript日期，而format()函数则用来编排这些日期的格式。“D”这个格式分类符说明使用长日期格式编排日期。如今，只要页面浏览者选择这350种语言其中之一，内容都会被正确的国际化。你能够经过运行示例下载中的4_SelectCulture.htm文件来了解上述方法。

示例：动态加载国际化文件

在上一节说过,你应该尽可能避免在页面中引用jQuery.glob.all.js文件, 由于它实在是太大了。相反，你能够动态地加载你所须要的国际化信息。好比说，你要建立一个下拉列表显示下面这些语言：

下面的代码会在用户从下拉框中选择一个新的语言后执行。这段代码会先判断选中的语言对应的国际化脚本文件是否已经加载了。若是尚未加载，则使用jQuery的$.getScript()函数动态加载国际化脚本文件。

当国际化脚本文件被浏览器加载之后，就会调用globalizePage()函数，继而执行客户端的代码完成国际化。这个方法的优势是可让你避免加载整个jQuery.glob.all.js文件—只要加载使用到的文件，并且只加载一次。示例下载中的5_Dynamic.htm文件演示了这个方法。

示例：自动检测用户的经常使用语言设置

大多数网站经过检测用户的浏览器设置来获得其经常使用语言，而后根据这种语言文化习惯来国际化网站内容。用户能够在浏览器中设置一个经常使用语言。这样，用户在请求页面时，经常使用语言设置会包含在请求Http消息头的Accept-Language字段中。若是使用的是微软的IE浏览器，能够经过如下步骤设置你经常使用的语言：

1. 在菜单栏里选择工具，Internet 选项。

2. 选择常规标签。

3. 在外观里点击语言按钮。

4. 点击添加在语言列表里增长新的语言。

5. 而后把你最经常使用的语言放在列表的最顶端。

你能够在这个对话框中设置多门经常使用语言。所设置语言的顺序关系将会体如今HTTP请求的Accept-Language字段中，如：

 
 
 
  
 Accept-Language：fr-FR,id-ID;q=0.7,en-US;q=0.3  
 
 
  
   
 

 

比较奇怪的是，用户不可以经过客户端的JavaScript脚本获得Accept-Language的内容。微软的IE和Firefox浏览器都支持一系列语言相关的属性，这些属性能够经过Window.navigator进行访问，例如windows.navigator.browserLanguage和window.navigator.language，不过这些属性中的语言通常指的是操做系统中设置的语言或者是浏览器的语言版本。你不能经过这些属性来获得用户设置的经常使用语言。

获得用户语言偏好（也就是Accept-Language字段中的内容）的惟一可靠方法就是编写服务器代码。例如，下面的ASP.NET页面就利用了服务器的Request.UserLanguages属性把用户的语言偏好设置赋给了客户端JavaScript的acceptLanguage变量（而后就能够经过客户端JavaScipt访问这些值了）：

为了使这段代码可以正常工做，页面中必须包含与acceptLanguage对应的文化信息。例如若是你的经常使用语言是fr-FR（法语-法国），那就必须在这个页面中引用jQuery.glob.fr-FR.js或者jQuery.glob.all.js这两个JavaScript脚本之一，不然没办法获得文化信息。关于这个方法的应用能够示例下载中的”6_AcceptLanguages.aspx”。

若是对于页面中用户的经常使用语言没有对应的脚本包含其文化信息，那么$.preferCulture()方法就会引用中立（neutral）的文化信息（例如，使用jQuery.glob.fr.js，而不是jQuery.glob.fr-FR.js）。若是中立文化信息也不可用，那么$.preferCulture()方法就会回滚到使用默认文化（英语）。

示例：利用国际化插件使JQuery UI DatePicker实现国际化

国际化插件的目的之一就是使开发能适应各类不一样文化的jQuery小工具的变得更为简单。咱们但愿确保jQuery国际化插件可以与现有的jQuery的UI插件如DatePicker共存并正常工做。为了实现这个目标，咱们建立了DatePicker插件的一个整合版本，使它能够在渲染日历的时候利用咱们的插件来提供国际化支持。下图演示了把jQuery国际化插件和整合后的DatePicker插件一块儿加入到页面并选择印度尼西亚语的效果。

注意：一周中每一天的名称都以印度尼西亚语的缩写形式显示。 此外，月份的名字也以印度尼西亚语显示。你能够从咱们的github网站下载整合版的JQuery UI DatePicker。你也可使用示例下载中文件7_DatePicker.htm所使用的版本。

原文名：jQuery Globalization Plugin from Microsoft