目的：前端（只采用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文件 主要的代碼 標(biāo)記處的代碼底層可能使用的是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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
