1. 程式人生 > >jQuery之前端國際化jQuery.i18n.properties

jQuery之前端國際化jQuery.i18n.properties

amp 2.6 asc tin org bar pro ima 鍵值對

jQuery之前端國際化jQuery.i18n.properties

jQuery.i18n.properties是一款輕量級的jQuery國際化插件,能實現Web前端的國際化。

國際化英文單詞為:Internationalization,又稱i18n,“i”為單詞的第一個字母,“18”為“i”和“n”之間單詞的個數,而“n”代表這個單詞的最後一個字母。jQuery.i18n.properties采用.properties文件對JavaScript進行國際化。jQuery.i18n.properties插件首先加載默認的資源文件(strings.properties),然後加載針對特定語言環境的資源文件(strings_zh.properties),這就保證了在未提供某種語言的翻譯時,默認值始終有效。

資源文件命名有以下三種格式:

basename.properties

basename_language.properties

basname_language_country.properties

jQuery.i18n.properties API

jQuery.i18n.properties的API只有幾個:jQuery.i18n.properties()、jQuery.i18n.prop()、jQuery.i18n.browserLang(),當然也可以采用技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享技術分享.i18n.properties()、.i18n.prop()、$.i18n.browserLang()的形式使用這些API。

jQuery.i18n.properties(settings)

該方法加載資源文件,其中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()));
                    });
                }
            });
        }
技術分享

jQuery.i18n.prop(key)

該方法以map方式使用資源文件中的值,其中key指的是資源文件中的key。當key指定的值含有占位符時,可用使用jQuery.i18n.prop(key,val1,val2……)的形式,其中val1,val2……對點位符進行順序替換。

jQuery.i18n.browserLang()

用於獲取瀏覽器的語言信息。

使用的方式

項目組織結構

技術分享

在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

jQuery之前端國際化jQuery.i18n.properties