65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery 探索全球化

Brij
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.82/5 (32投票s)

2011年2月1日

CPOL

6分钟阅读

viewsIcon

197263

downloadIcon

2197

本文讨论了 jQuery 的另一个官方插件——全球化。

目录

引言

最近，微软宣布了三个 jQuery 插件为官方插件。

  • jQuery 客户端模板
  • 数据绑定
  • 全球化

我发现所有这些都是非常棒的 Web 开发功能。我已经写过关于前两者的文章。请查找下面的链接

我认为你们一定发现上面的文章非常有帮助，并且将在不久的将来使用它们，或者你们中的一些人可能已经开始使用它了。我希望大家分享你对这篇文章的看法，这将对我写得更好非常有帮助。

现在，在这篇文章中，我将讨论最后一个功能，即 Globalization。当我们说到全球化时，脑海中浮现的是资源文件。ASP.NET 本身提供了非常好的机制来满足全球化的需求。但是它需要回发，所以看起来不太好，而且性能也不好。

jQuery 也通过支持的插件为我们提供了一种实现全球化的方法。

同样，我写了一些我在前两篇文章中为新读者写过的共同点。

什么是全球化

根据 MSDN，“全球化是设计和开发适用于多种文化的应用程序的过程。”

因此，全球化允许我们开发一个应用程序，该应用程序提供将应用程序本地化为不同文化/语言的选项。现在，由于我们在全球化环境中工作并为全世界服务，因此为我们的应用程序提供全球化功能已成为一种必要。

因此，在这篇文章中，我将讨论如何借助 jQuery 提供全球化功能。

先决条件

  • jQuery 库
  • 全球化插件

jQuery 已随 VS2008/2010 提供。但如果您使用的是 VS 2005，则可以从以下链接下载

要下载全球化插件，请点击这里。

使用 jQuery 进行全球化

因此，在这篇文章中，我将讨论如何利用 jQuery 的全球化功能。

jQuery 为我们提供了以不同区域设置格式化和解析日期、数字和货币的功能。jQuery 插件定义了插件当前支持的 350 多种区域设置。

有些语言在几个地区/国家很常见，但数字、货币和日期的格式却不同。例如，英语在美国、英国和其他一些欧洲国家都有说。对于这些，我们定义了多种区域设置，用于识别这些国家之间的独特性。

该插件有两种版本。

一个文件 jQuery.glob.all.js 包含了大约 350 种当前区域设置。所以使用这个，我们只需要包含这个文件来支持插件支持的所有区域设置。另一种方法是，该插件还有特定区域设置的 js 文件，可以根据应用程序支持的区域设置来包含。

插件的一些常用 API

  • jQuery.culture：此项保存当前设置的区域设置信息，并在默认情况下使用，即在格式化各种值时，如果未指定区域设置，则使用此区域设置。
  • jQuery.preferCulture：此方法用于设置用户首选的区域设置，并且此区域设置用于页面上的所有格式化、解析等操作。实际上，正如方法名称所示，它会选择页面上包含的 JavaScript 的最佳匹配区域设置。
  • jQuery.format：此方法用于在给定的格式字符串中格式化日期、数字和货币。此方法使用广泛。
  • jQuery.findClosestCulture：此方法的工作方式与 preferCulture 类似，但它返回最佳匹配的区域设置，并且不会将 jQuery.culture 设置为它。
  • jQuery.localize：此方法允许我们扩展特定区域设置并返回或设置本地化值。

插件还提供了许多其他函数，如 jQuery.parseInt,jQuery.parseFloat, jQuery.parseDate 等，可用于多种特定用途。我已讨论其中一些。

让我们看一些例子

在此部分，我将向您展示一些示例。

第一个示例：在此示例中，我将显示 Infosys 在特定日期的股票详细信息。它包括特定日期的价格和销量，分别用两种不同的区域设置显示。让我们看看运行的应用程序。

Static

现在让我们看代码。首先让我们看看 aspx 代码

	<table style="border:1px solid black; font-family:Verdana; font-size:small">
         <tr>
             <td colspan="2"><h3>English - US</h3></td>
         </tr>
         <tr>
             <td>Stock Name</td>
             <td><span id="Text1" >Infosys</span></td>
         </tr>
         <tr>
             <td>Stock Price </td>
             <td><span id="price"/></td>
         </tr>
         <tr>
             <td>Day</td>
             <td><span id="date"/></td>
         </tr>
         <tr>
             <td>Units Transacted</td>
             <td><span id="unitsTransacted" /></td>
         </tr>
         <tr>
             <td colspan="2"><h3>France - French </h3></td>
         </tr>
         <tr>
             <td>Stock Name</td>
             <td><span id="Span1">Infosys</span></td>
         </tr>
         <tr>
             <td>Stock Price </td>
             <td><span id="price1"/></td>
         </tr>
         <tr>
             <td>Date</td>
             <td><span id="date1"/></td>
         </tr>
         <tr>
             <td>Units Transacted</td>
             <td><span id="unitsTransacted1" /></td>
         </tr>
     </table>

如上所示，我正在用两种不同的区域设置（英语-美国和法语-法国）显示 Infosys 的股票详细信息。现在让我们跳到脚本。这是我包含的脚本。它们是

 <script src="scripts/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="scripts/jquery.glob.js" type="text/javascript"></script>
 <script src="scripts/globinfo/jQuery.glob.all.js" type="text/javascript"></script>

因此，这里包含了三个文件。第一个是 jQuery 文件，第二个是通用的 Global 文件，最后一个是包含所有区域设置特定详细信息的。现在剩下的 JavaScript 代码是

// Set culture
jQuery.preferCulture("en-US");

// Formatting price
var price = jQuery.format(3899.888, "c");
//Assigning stock price to the control
jQuery("#price").html(price);

// Formatting date 
var date = jQuery.format(new Date(2010, 11, 15), "D");
//Assigning date to the control
jQuery("#date").html(date);

// Formatting units transacted
var units = jQuery.format(45678.576, "n2");
//Assigning units to the control
jQuery("#unitsTransacted").html(units);

// Set culture
jQuery.preferCulture("fr-FR");

// Format price
var price = jQuery.format(3899.888, "c");
//Assigning stock price to the control
jQuery("#price1").html(price);

// Format date available
var date = jQuery.format(new Date(2010, 11, 15), "D");
//Assigning date to the control
jQuery("#date1").html(date);

// Format units in stock
var units = jQuery.format(45678.576, "n2");
//Assigning units to the control
jQuery("#unitsTransacted1").html(units);

从上面的代码可以看出，我使用了 preferCulture 方法来设置区域设置，并使用 format 方法来格式化此处的价格、日期和数量等各种数据。

因此，以上是一个简单的示例，说明了插件的工作原理。

动态更改区域设置

现在在这个例子中，我将讨论另一种场景，即用户可能希望动态选择区域设置，并希望页面相应地更新。

在我的示例应用程序中，有一个下拉列表，用户选择区域设置，页面会相应地更新。首先让我们看看应用程序。

Dynamic Culture

现在让我们看代码。首先让我们看看 aspx 代码

 <table style="border:1px solid black; font-family:Verdana; font-size:small">
           <tr>
               <td style="font-weight:bold">Select Culture</td>
               <td>
                   <select id="ddlCultures">
                       <option value="en-US">English - US</option>
                       <option value="en-IN">EngLish - India</option>
                       <option value="en-AU">EngLish - Australia</option>
                       <option value="fr-FR">French - France</option>
                       <option value="es-MX">Spanish - Mexico</option>
                   </select>
               </td>
           </tr>
           <tr>
               <td style="font-weight:bold">Stock Name</td>
               <td> <span id="Text1">Infosys </span></td>
           </tr>
           <tr>
               <td style="font-weight:bold">Stock Price</td>
               <td><span id="price"/></td>
           </tr>
           <tr>
               <td style="font-weight:bold">Day</td>
               <td><span id="date"/></td>
           </tr>
           <tr>
               <td style="font-weight:bold">Units Transacted</td>
               <td><span id="unitsTransacted"/></td>
           </tr>
       </table>

现在让我们看看包含的脚本

<script src="scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="scripts/jquery.glob.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-US.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-IN.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-AU.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.fr-FR.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.es-MX.min.js" type="text/javascript"></script>

如上所示，我包含了特定区域设置的文件，而不是所有区域设置的一个通用文件，因为包含所有 350 个区域设置的通用文件的大小可能会带来性能开销。众所周知，这些是将在应用程序中使用的特定区域设置，那么我们应该选择特定区域设置的文件。

现在是 JavaScript 代码

     LoadPage("en-US");
     
     jQuery("#ddlCultures").change(function() {
         var selectedCulture = this.value;
         LoadPage(selectedCulture);
     });

        function LoadPage(selectedCulture) {

            jQuery.preferCulture(selectedCulture);
            
            var price = $.format(3899.888, "c");
            jQuery("#price").html('12345');
            
            // Format date available
            var date = $.format(new Date(2011, 12, 25), "D");
            jQuery("#date").html(date);
            
            // Format units in stock
            var units = $.format(45678, "n0");
            jQuery("#unitsTransacted").html(units);
        }

在这段代码中，我有一个包含多个区域设置的下拉列表。您可以选择所需的区域设置，页面将相应地进行修改。我使用了相同的表单，但根据下拉列表的选择调用了 preferculture 方法。

其余代码与上面的示例相同。 

注意：您可以在附件中找到完整的示例。

从浏览器中选择区域设置信息

有时，用户也会在浏览器中设置区域设置偏好。许多应用程序都依赖于此。因此，我们也可以从浏览器读取区域设置信息，并相应地加载页面。要获取区域设置信息，我们可以使用以下方法

  var language = "<%= Request.UserLanguages[0] %>";
  jQuery.preferCulture(language);

结论

此功能对于面向全球的应用程序非常有用。随着您朝着 RIA 应用程序迈进，此 jQuery 插件可能是一个关键。

反馈与建议

希望您喜欢我上面的文章。请分享您的宝贵反馈，这将对我写得更好非常有帮助。

© . All rights reserved.