<学习笔记> jQuery 国际化多语言

最新推荐文章于 2024-03-17 09:51:44 发布

Mars_Jiang

最新推荐文章于 2024-03-17 09:51:44 发布

阅读量4k

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery.i18n.properties是一款轻量级的jQuery国际化插件，能实现Web前端的国际化

资源文件命名有以下三种格式：

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()

用于获取浏览器的语言信息。

使用的方式1

项目组织结构

在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>

    $(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>

使用的方式2

jquery+angularJs

<script type="text/javascript" src="../plug-in/jquery/jquery2.1.0.js"></script>  
<script type="text/javascript" src="../plug-in/angular/angular.js"></script>  
<script type="text/javascript"  
    src="../plug-in/jquery/jquery.i18n.properties-1.0.9.js"></script>

定义propties 文件

1、messageResources_en_US.properties内容如下

language=language
firstName=firstName
lastName=lastName
age=age
sex=sex
birthday=birthday
email=email
address=address

2、messageResources_zh_CN.properties

language=语言
firstName=姓
lastName=名字
age=年龄
sex=性别
birthday=生日
email=电子邮箱
address=地址

3、JS代码

<script>  
    var app = angular.module("testint", []);  
    function test($scope) {  
        $scope.info = null;  
        jQuery.i18n.properties({// 加载资浏览器语言对应的资源文件  
            name : 'messageResources', // 资源文件名称  
            language : 'en_US', //默认为英文当改为zh_CN时页面显示中文语言  
            path : '../resource/', // 资源文件路径  
            mode : 'map', // 用 Map 的方式使用资源文件中的值  
            callback : function() {// 加载成功后设置显示内容  
                $scope.info = $.i18n.map;  
            }  
        });  
    }  
</script>  
</head>  
<body>  
    <div ng-controller="test">  
        {{info.address}} <br>{{info.firstName}}<br>  
        {{info.language}}  
    </div>  
</body>

下载地址：

https://code.google.com/p/jquery-i18n-properties/downloads/list

Mars_Jiang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
<学习笔记> jQuery 国际化多语言

jQuery.i18n.properties是一款轻量级的jQuery国际化插件，能实现Web前端的国际化资源文件命名有以下三种格式：basename.propertiesbasename_language.propertiesbasname_language_country.propertiesjQuery.i18n.properties AP
复制链接

扫一扫