jquery-i18n.properties的使用

自己写的一个小的样例

文件结构如下图

在这里插入图片描述

配置文件Message.properties中的内容

新建=create
test=测试

Message_zh.properties中的内容

用户名=User Name
密码=Password

html中的内容如下

<!doctype html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>国际化样例</title>
</head>
<body>

<div id="content">
    <div class="col-sm-6"><span>用户名</span></div>
    <div class="col-sm-6"><span>密码</span></div>
</div>
<!--<input type="text" placeholder="内容" class="input">-->
<script type="application/javascript" src="./js/jquery.js"></script>
<script type="application/javascript" src="./js/jquery.i18n.properties.js"></script>
<script type="application/javascript" src="./js/lan.js"></script>

</body>
</html>

lan.js中的代码

$(function(){
    $.i18n.properties({
        name:'Message',    //属性文件名     命名格式: 文件名_国家代号.properties
        path:'i18n',   //注意这里路径是你属性文件的所在文件夹
        mode:'both',
        language:"en",     //这就是国家代号 name+language刚好组成属性文件名:strings+zh -> strings_zh.properties
        callback:function(){
           $("span").each(function () {
               var val=$(this).html();
               if($.i18n.map[val]) {
                   $(this).html($.i18n.prop(val))
               }
           })
        }
    });
})

初始效果
在这里插入图片描述
最终的效果
在这里插入图片描述
注释:开始也许会遇到一个问题就是,找不到对应的文件,那请查看一下自己的文件路径是否引对,如果没有引对,请修改一下。希望的案例对你们有帮助!

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页