jquery 国际化使用

来源:互联网 发布:linux设置静态ip 编辑:程序博客网 时间:2024/05/20 15:38

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=Firstcom_zte_lte_visualization_table_pre_page=Previouscom_zte_lte_visualization_table_next_page=Nextcom_zte_lte_visualization_table_last_page=Lastcom_zte_lte_visualization_table_data_nothing=No data available in tablecom_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'));
原创粉丝点击