方法
用的方法是 jquery.i18n.js。
jquery.i18n不多介绍,网上有很多相关的东东。
用法
用法是在html页面中引入jquery.i18n.js文件。
在jquery.i18n.js中配置一下json语言包路径。
在对应文件夹下引入编写语言json文件
显示内容标签中加入自定义属性
点击切换
步骤
1.jquery.i18n.js代码,
(function($) {
$.fn.extend({
i18n: function(options) {
var defaults = {
lang: "",
defaultLang: "",
filePath: "/i18n/",
filePrefix: "i18n_",
fileSuffix: "",
forever: true,
callback: function() {}
};
function getCookie(name) {
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var arr1 = arr[i].split('=');
if (arr1[0] == name) {
return arr1[1];
}
}
return '';
};
function setCookie(name, value, myDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + myDay);
document.cookie = name + '=' + value + '; expires=' + oDate;
};
var options = $.extend(defaults, options);
if (getCookie('i18n_lang') != "" && getCookie('i18n_lang') != "undefined" && getCookie('i18n_lang') != null) {
defaults.defaultLang = getCookie('i18n_lang');
} else if (options.lang == "" && defaults.defaultLang == "") {
throw "defaultLang must not be null !";
};
if (options.lang != null && options.lang != "") {
if (options.forever) {
setCookie('i18n_lang', options.lang);
} else {
$.removeCookie("i18n_lang");
}
} else {
options.lang = defaults.defaultLang;
};
var i = this;
$.getJSON(options.filePath + options.filePrefix + options.lang + options.fileSuffix + ".json", function(data) {
var i18nLang = {};
if (data != null) {
i18nLang = data;
}
$(i).each(function(i) {
var i18nOnly = $(this).attr("i18n-only");
if ($(this).val() != null && $(this).val() != "") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "value") {
$(this).val(i18nLang[$(this).attr("i18n")])
}
}
if ($(this).html() != null && $(this).html() != "") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "html") {
$(this).html(i18nLang[$(this).attr("i18n")])
}
}
if ($(this).attr('placeholder') != null && $(this).attr('placeholder') != "") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "placeholder") {
$(this).attr('placeholder', i18nLang[$(this).attr("i18n")])
}
}
});
options.callback();
});
}
});
})(jQuery);
jquery.i18n.js代码中能看出是依赖jquery的,所以jquery需在前引入。
2.配置json路径就是配置filePath的路径
filePath: "/i18n/", //起始/是同一级开始 i18n文件夹中放入json语言包
编写json文件
我个人目录如下
i18n_cn.json、i18n_en.json是中文和英文json,内容编写为定义一个对象,往对象中塞键值。
{
"i18n.themselves": "关于我们",
"i18n.successful-case": "成功案例",
"i18n.Intelligence-test": "AI智能考场",
"i18n.evaluation": "AI远程考评",
"i18n.practice": "AI智能练习",
"i18n.cooperation": "诚邀合作",
"i18n.login": "登 录",
}
{
"i18n.themselves": "ABOUT US",
"i18n.successful-case": "FUNCTOR",
"i18n.Intelligence-test": "SITE",
"i18n.evaluation": "EVALUATION",
"i18n.practice": "PRACTICE",
"i18n.cooperation": "COOPERATE",
"i18n.login": "LOGIN",
}
/*默认语言*/
var defaultLang = "cn"
function languageSelect(defaultLang){
$("[i18n]").i18n({
defaultLang: defaultLang,
filePath: "./i18n/",
filePrefix: "i18n_",
fileSuffix: "",
forever: true,
callback: function(res) {}
});
}
languageSelect(defaultLang);
5.点击切换
function select(){
$(document).click(function(){
$(".select_module_con ul").slideUp();
})
var module=$(".select_result");
module.click(function(e){
e.stopPropagation();
var ul=$(this).next();
ul.stop().slideToggle();
ul.children().click(function(e){
e.stopPropagation();
$(this).parent().prev().children("span").text($(this).text());
ul.stop().slideUp();
var condition = $(this).text(); //根据按钮显示 中 文/English
if(condition == 'English'){
console.log(condition)
defaultLang = "en",
languageSelect(defaultLang);
}else{
defaultLang = "cn",
languageSelect(defaultLang);
}
})
})
}
$(function(){
select();
})