2018年(273)
分类: 大数据
2018-06-20 15:33:26
其实现在开发者解决多语言普遍三种解决方案:
第一个是为每个页面提供每种语言的相关页面。
第二种是把内容从表现形式中分离出来,做不同语言的内容文件。
第三种是动态翻译页面内容。第三种很少见,而且机器翻译技术还很难达到人们的预期。
其实第二种相对来说简单一点,那么开搞。
文件目录
index.html
<html> <meta charset="utf-8"> <title>translation testtitle> <script src="">script> <script src="js/script.js">script> <script src="js/index.js">script> head> <body> <div> <a href="#" id="enBtn">Englisha> <a href="#" id="zhBtn">简体中文a> div> <div><a lang>click here:a>div> <div><input type="button" value="apply" lang id="applyBtn">div> body> html>
script.js
var dict = {};
$(function () {
registerWords(); if(getCookieVal("lang")=="en"){
setLanguage("en");
}else if(getCookieVal("lang")=="zh"){
setLanguage("zh");
}else{
setLanguage("en");
} // 切换语言事件 根据自己业务而定 $("#enBtn").bind("click", function () {
setLanguage("en"); //这里也可以写一些其他操作,比如加载语言对应的css });
$("#zhBtn").bind("click", function () {
setLanguage("zh");
});
}); function setLanguage(lang) {
setCookie("lang=" + lang + "; path=/;");
translate(lang);
} function getCookieVal(name) { var items = document.cookie.split(";"); for (var i in items) { var cookie = $.trim(items[i]); var eqIdx = cookie.indexOf("="); var key = cookie.substring(0, eqIdx); if (name == $.trim(key)) { return $.trim(cookie.substring(eqIdx + 1));
}
} return null;
} function setCookie(cookie) { var Days = 30; //此 cookie 将被保存 30 天 var exp = new Date(); //new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cookie = cookie+ ";expires=" + exp.toGMTString();
} function translate(lang) { if(sessionStorage.getItem(lang + "Data") != null){
dict = JSON.parse(sessionStorage.getItem(lang + "Data"));
}else{
loadDict();
}
$("[lang]").each(function () { switch (this.tagName.toLowerCase()) { case "input":
$(this).val(__tr($(this).attr("lang"))); break; default:
$(this).text(__tr($(this).attr("lang")));
}
});
} function __tr(src) { return (dict[src] || src);
} function loadDict() { var lang = (getCookieVal("lang") || "en");
$.ajax({ async: false,
type: "GET",
url: "/lang/"+lang + ".json",
success: function (msg) {
dict = msg;
sessionStorage.setItem(lang + 'Data', JSON.stringify(dict));
}
});
}