jquery結(jié)合html實現(xiàn)中英文頁面切換
目的:前端(只采用thymeleaf模板+jquery) 實現(xiàn)國際化
由:前端沒有采用流行的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實現(xiàn)記憶功能 下一次用戶刷新界面之后 記得之前用戶使用了那個語種 -->
<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" 固定寫法 對應(yīng)語言包文件中的key -->
<li><a data-localize="hpt.management" href="hospitality_management_ja.html" >MANAGEMENT</a></li>
<li><a data-localize="hpt.support" href="hospitality_support_ja.html">SUPPORT</a></li>
<li><a data-localize="hpt.tutorial" href="hospitality_tutorial_ja.html">TUTORIAL</a></li>
<li><a data-localize="hpt.features" 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 需要在服務(wù)器上執(zhí)行 本機執(zhí)行無法獲取需要的json文件 主要的代碼 標記處的代碼底層可能使用的是xmlHttpRequest實現(xiàn)獲取.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函數(shù)
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 底層實現(xiàn)切換邏輯
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");
};
//根據(jù)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");
}
}
});
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery使用動態(tài)渲染表單功能完成ajax文件下載
使用ajax實現(xiàn)文件下載,方便,快捷,時尚,多么有挑戰(zhàn)的一個功能,首先獲取url和data然后把參數(shù)組裝成form的input再利用request發(fā)送請求,也就是動態(tài)渲染表單,提交表單后再刪除,本例將實現(xiàn)文件下載功能,感興趣的朋友可以聊解下2013-01-01
基于jQuery實現(xiàn)仿微博發(fā)布框字數(shù)提示
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)仿微博發(fā)布框字數(shù)提示的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07
JQuery調(diào)用WebServices的方法和4個實例
你是不是經(jīng)常作這種開發(fā),前端用JS寫邏輯,后端用aspx或者ashx作服務(wù)?你是不是經(jīng)常在請求aspx的時候在查詢字符串中拼接諸如a.aspx?method=getDepartmetn¶m1=1¶m2=2的字符串?2014-05-05

