http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/javascript
jQuery.i18n.properties是一款輕量級的jQuery國際化插件,能實現Web前端的國際化。html
國際化英文單詞爲:Internationalization,又稱i18n,「i」爲單詞的第一個字母,「18」爲「i」和「n」之間單詞的個數,而「n」表明這個單詞的最後一個字母。jQuery.i18n.properties採用.properties文件對JavaScript進行國際化。jQuery.i18n.properties插件首先加載默認的資源文件(strings.properties),而後加載針對特定語言環境的資源文件(strings_zh.properties),這就保證了在未提供某種語言的翻譯時,默認值始終有效。前端
資源文件命名有如下三種格式:java
basename.propertiesjquery
basename_language.propertiesweb
basname_language_country.properties數組
jQuery.i18n.properties的API只有幾個:jQuery.i18n.properties()、jQuery.i18n.prop()、jQuery.i18n.browserLang(),固然也能夠採用.i18n.properties()、.i18n.prop()、$.i18n.browserLang()的形式使用這些API。瀏覽器
該方法加載資源文件,其中settings是配置加載選項的一系列鍵值對。各項配置項的具體描述以下:緩存
選項 | 描述 | 類型 | 可選 |
name | 資源文件的名稱,例如strings或[strings1,strings2],前者表明一個資源文件,後者表明資源文件數組 | string或string[] | 否 |
path | 資源文件所在路徑 | string | 是 |
mode | 加載模式:函數 「vars」表示以JavaScript變量或函數的形式使用資源文件中的Key 「map」表示以Map的方式使用資源文件中的Key 「both」表示以同時使用兩種方式。若是資源文件中的Key包含JavaScript關鍵字,則只能採用「map」。默認值是「vars」。 |
string | 是 |
language | ISO-639指定的語言編碼(例如「en」表示英文,「zh」表示中文),或者同時使用ISO-639和ISO-3166編碼(例如:「en_US」,「zh_CN」)。若是不指定,則採用瀏覽器報告的語言編碼。 |
string | 是 |
cache | 指定瀏覽器是否對資源文件進行緩存,默認值爲false |
boolean | 是 |
encoding | 加載資源文件時使用的編碼。默認值爲UTF-8 |
string | 是 |
callback | 代碼執行完成時運行的回調函數 |
function | 是 |
function loadProperties() { jQuery.i18n.properties({//加載資瀏覽器語言對應的資源文件 name : 'strings', //資源文件名稱 path : '/i18n/', //資源文件路徑 mode : 'map', //用Map的方式使用資源文件中的值 language : 'zh', callback : function() {//加載成功後設置顯示內容 $('.l-btn-text').each(function() { $(this).text($.i18n.prop($(this).text())); }); } }); }
該方法以map方式使用資源文件中的值,其中key指的是資源文件中的key。當key指定的值含有佔位符時,可用使用jQuery.i18n.prop(key,val1,val2……)的形式,其中val1,val2……對點位符進行順序替換。
用於獲取瀏覽器的語言信息。
項目組織結構
在i18n目錄下,strings.properties對應默認翻譯,strings_zh.properties對應中文翻譯。
strings.properties
strings_zh.properties
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/jquery.i18n.properties-1.0.9.js"></script>
<div id="content"> <div> <label id="label_username"></label> <input type="text" id="username"></input> </div> <div> <label id="label_password"></label> <input type="password" id="password"></input> </div> <input type="button" id="button_login"/> </div>
<script type="text/javascript"> $(function(){ jQuery.i18n.properties({ name : 'strings', //資源文件名稱 path : '/i18n/', //資源文件路徑 mode : 'map', //用Map的方式使用資源文件中的值 language : 'zh', callback : function() {//加載成功後設置顯示內容 $('#button-login').html($.i18n.prop('Login')); $('#label-username').html($.i18n.prop('User Name')); $('#label-password').html($.i18n.prop('Password')); } }); }); </script>
下載地址:
https://code.google.com/p/jquery-i18n-properties/downloads/list