当前位置: 首页 > 工具软件 > jQuery Geo > 使用案例 >

jquery 国际化使用

穆承运
2023-12-01

jquery 有专门使用 国际化的插件 ,jquery.i18n.properties

jQuery.i18n.properties 采用 .properties 文件对 JavaScript 进行国际化。jQuery.i18n.properties 插件根据用户指定的(或浏览器提供的 )语言和国家编码(符合 ISO-639 和 ISO-3166 标准)来解析对应的以“.properties”为后缀的资源文件。

jQuery.i18n.properties 插件首先加载默认的资源文件(例如:strings.properties)然后加载针对特定语言环境的资源文件(例如:strings_zh.properties),这就保证了在未提供某种语言的翻译时,默认值始终有效。开发人员可以以 JavaScript 变量(或函数)或 Map 的方式使用资源文件中的 key。

使用国际化:

第一步:创建properties资源文件。

例如创建如下文件名 :为 strings.properties,那么与之对应的必须要有 strings_zh.properties,两个文件名的key 值必须保持一致

第二步:在js文件中引入jQuery.i18n.properties所需js文件。

<script src="<>/js/jquery.i18n.properties-min-1.0.9.js"></script>

**

第三步:使用jQuery.i18n.properties 的API

**

<script type="text/javascript">
               $(document).ready(function(){
               //国际化加载属性文件
                       jQuery.i18n.properties({
                           name:'js',
                           path:'<%=path%>/js/i18n/',
                           mode:'map',
                           callback: function() {// 加载成功后设置显示内容
                               //alert(jQuery.i18n.prop("theme_manage.js_activity"));
                           }
                       });
        });
</script>

参数介绍:

name : 定义的资源文件中语言简码前面的字符串,可以是一个数组,如果资源文件 有 visualization_strings.properties,visualization_strings_zh.properties,strings.properties,则

name:['strings','visualization_strings'], //资源文件名称

path: 资源文件的相对路径,相对于整个工程来说,例如如下:

    path:'i18n/', //资源文件路径

mode: 加载模式;”vars”表示以JavaScript变量或函数的形式加载资源文件中的key值(默认为这种),“map”表示以map的方式加载资源文件中的key值。“both表示可以同时使用这两种方式”。

callback:回调函数

第四步:js文件中根据key找对应的值。

function getMod3Ratio(time) {
    var title = $.i18n.prop('com_zte_lte_PCI_ui_main_PCIMod3ErrorThrown');
    $.ajax({
        type: "GET",
        contentType: "application/json",
        url: "lte/pci/mod3rate",
        async: false,
        data: {
            "province": geo.province,
            "city": geo.city,
            "district": geo.district,
            "timeUnit": curTimeUnit,
            "time": time
        },
        success: function(data) {
            mod3Ratio = data;
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            reqFailedProcessForPNotify(XMLHttpRequest, textStatus, errorThrown, title)
            console.log(errorThrown);
        }
    });
    return;
}

$.i18n.prop('com_zte_lte_PCI_ui_main_PCIMod3ErrorThrown');对应着资源文件中的key值

jQuery.i18n.properties实现的原理

根据name后面的值,加上浏览器的语言简码,再加上.properties找到对应的资源文件。这个过程是自动的,只需要进行上面的配置即可。
propertites中键值对如下:等号前的为key,等号后的为值(注意一点的是,不同的资源文件中key必须保持一致,是自定义的)。
例如: visualization_strings_zh.properties

#小区总数二级页面表单
#com_zte_lte_projectparametermanage_cellsum_checkform_city=城市



com_zte_lte_projectparametermanage_table_loading=加载中...

#表格

#表格翻页
com_zte_lte_visualization_table_first_page=首页
com_zte_lte_visualization_table_pre_page=前一页
com_zte_lte_visualization_table_next_page=后一页
com_zte_lte_visualization_table_last_page=尾页
com_zte_lte_visualization_table_data_nothing=没有找到相应的数据
#导出
com_zte_lte_visualization_cellsum_homepage_export=导出

而对应的 visualization_strings.properties 文件的key 值应该保持一致

#RSRP
#com_zte_lte_visualization_cellsum_checkform_city=City

#CallDropAnalysis

#OverShootCoverage

#WeakCoverage

#OverlapCoverage

#表格翻页
com_zte_lte_visualization_table_first_page=First
com_zte_lte_visualization_table_pre_page=Previous
com_zte_lte_visualization_table_next_page=Next
com_zte_lte_visualization_table_last_page=Last
com_zte_lte_visualization_table_data_nothing=No data available in table
com_zte_lte_projectparametermanage_table_loading=loading
#导出
com_zte_lte_visualization_cellsum_homepage_export=Export

附上获取浏览器的语言 代码

 function getLanguage()
    {
        if (navigator.appName == 'Netscape')
        var language = navigator.language;
        else
        var language = navigator.browserLanguage;
        if (language.indexOf('en') > -1) document.write('english');
        else if (language.indexOf('nl') > -1) document.write('dutch');
        else if (language.indexOf('fr') > -1) document.write('french');
        else if (language.indexOf('de') > -1) document.write('german');
        else if (language.indexOf('ja') > -1) document.write('japanese');
        else if (language.indexOf('it') > -1) document.write('italian');
        else if (language.indexOf('pt') > -1) document.write('portuguese');
        else if (language.indexOf('es') > -1) document.write('Spanish');
        else if (language.indexOf('sv') > -1) document.write('swedish');
        else if (language.indexOf('zh') > -1) document.write('chinese');
        else
        document.location.href = 'english';
    }

以上就是jquery 国际化基本使用方法

**

js 中使用举例

**

$('#comparing button span:first-child').html($.i18n.prop('com_zte_lte_visualization_Geography'));


            $('#Cell_popup_export input').val($.i18n.prop('com_zte_lte_visualization_cellsum_homepage_export'));
 类似资料: