啊！洞庭湖的君山是多么雄伟壮观啊！就像一个忠诚的卫士守卫着洞庭湖，好让洞庭湖不受风雨的侵扰。一场小雨过后，出现了一道彩虹，就像一座美丽七彩桥。
目的：前端（只采用thymeleaf模板+jquery） 实现国际化
由：前端没有采用流行的vue.js angular 等框架，纯html不可以引用js中定义的常量
采用jquery赋值（维护2个模板（中，英）界面） 直接out
方案：采用https://github.com/coderifous/jquery-localize/ 一个本地化插件
a jQuery plugin that makes it easy to internationalize your web site
步骤：
1 html
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Language</title>
<!-- 引用三个js文件 language_cookie.js实现记忆功能 下一次用户刷新界面之后 记得之前用户使用了那个语种 -->
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.localize.js" type="text/javascript" charset="utf-8"></script>
<script src="language_cookie.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="top_lan">
<select id="ddlSomoveLanguage" onchange="chgLang();">
<option value="">LAGUAGE</option>
<option value="ja">日本</option>
<option value="en">ENGLISH</option>
</select>
</div>
<div id="prod_navright">
<ul> <!-- data-localize="hpt.management" 固定写法 对应语言包文件中的key -->
<li><a data-localize="hpt.management" rel="nofollow noopener noreferrer" href="hospitality_management_ja.html" >MANAGEMENT</a></li>
<li><a data-localize="hpt.support" rel="nofollow noopener noreferrer" href="hospitality_support_ja.html">SUPPORT</a></li>
<li><a data-localize="hpt.tutorial" rel="nofollow noopener noreferrer" href="hospitality_tutorial_ja.html">TUTORIAL</a></li>
<li><a data-localize="hpt.features" rel="nofollow noopener noreferrer" href="hospitality_features_ja.html">FEATURES</a></li>
</ul>
</div>
</body>
</html>
2 语言包文件
text-en.json
{
"hpt":{
"features": "FEATURES",
"tutorial": "TUTORIAL",
"support": "SUPPORT",
"management": "MANAGEMENT"
}
}
text-ja.json
·······
3 language_cookie.js 需要在服务器上执行 本机执行无法获取需要的json文件 主要的代码 标记处的代码底层可能使用的是xmlHttpRequest实现获取.json语言包文件
var name = "somoveLanguage";
function chgLang() {
var value = $("#ddlSomoveLanguage").children('option:selected').val();
SetCookie(name, value);
console.log("come in chgLang" + name + value);
location.reload();
}
function SetCookie(name, value) {
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 = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){ //取cookies函数
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]);
return null
}
$(function() {
var uulanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
console.log("come in readly" + uulanguage);
if (uulanguage.indexOf("en") > -1) {
$("[data-localize]").localize("text", { //**主要的代码** jquery.localize.js 底层实现切换逻辑
pathPrefix: "lang",
language: "en"
});
console.log("come in en");
} else if (uulanguage.indexOf("ja") > -1) {
$("[data-localize]").localize("text", {
pathPrefix: "lang",
language: "ja"
});
console.log("come in ja");
} else {
$("[data-localize]").localize("text", {
pathPrefix: "lang",
language: "en"
});
console.log("come in moren en");
};
//根据cookie选择语言
if (getCookie(name) != "") {
if (getCookie(name) == "ja") {
$("[data-localize]").localize("text", {
pathPrefix: "lang",
language: "ja"
});
console.log("come in cookie ja");
}
if (getCookie(name) == "en") {
$("[data-localize]").localize("text", {
pathPrefix: "lang",
language: "en"
});
console.log("come in cookie en");
}
}
});
以上就是jquery结合html如何实现中英文页面切换。这年头不缺爱情，缺的是把爱情当回事的人。更多关于jquery结合html如何实现中英文页面切换请关注haodaima.com其它相关文章！
