用于前端文本国际化,支持同时引入多个语言资源文件,更友好的支持中文环境,在中文环境下无需引入资源文件
该插件依赖于jquery 和 js-cookie,可修改源代码取消对后者的依赖
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js"></script>
<script src="../jquery.i18n.js"></script>
- 设置语言,参数为空时默认从浏览器里获取
$.i18n.setLocale('en');
-
加载资源文件,待国际化的代码都在回调函数中处理,参数success标识加载了资源文件,中文环境下无需加载资源文件
多个资源: $.i18n.load(['../lang/language.js', '../lang/language2.js'], function(success){...}); 单个资源: $.i18n.load('../lang/language.js', function(success){...});
-
获取资源,详见demo
- 通过 k-resid 标签属性获取
<label k-resid="username">用户名</label>
$('label[k-resid]').each(function(i, item){
//下面两种方法都支持
$(item).text($.i18n.prop(item));
//$(item).text($.i18n.prop($(item).attr('k-resid')));
});
$('#j_username').attr('placeholder', $.i18n.prop('#j_username'));
* 通过 id 获取
alert($.i18n.prop('username_is_null', '请输入用户名'));
* 占位符功能
$('#whoami2').text($.i18n.prop('whoami', $.i18n.prop('monkey'), '16'));
$.i18n.lang = $.extend(true, $.i18n.lang || {}, {
zh: {
whoami: '我是{0}, 今年{1}岁',
monkey: '猴子',
'中文资源': '中文资源',
test: '测试'
},
en: {
whoami: 'I am {0}, I am {1} years old',
monkey: 'Monkey',
'中文资源': 'Chinese resources',
test: 'Test'
},
'zh-tw': {
whoami: '我是{0},今年{1}歲',
monkey: '鲁夫',
'中文资源': '中文資源',
test: '測試'
}
});
支持中文作为资源id配置,不建议这样使用,原因是不符合国际习惯以及资源文件相对较大