jquery結(jié)合html實(shí)現(xiàn)中英文頁面切換
目的:前端(只采用thymeleaf模板+jquery) 實(shí)現(xiàn)國(guó)際化
由:前端沒有采用流行的vue.js angular 等框架,純html不可以引用js中定義的常量
采用jquery賦值(維護(hù)2個(gè)模板(中,英)界面) 直接out
方案:采用https://github.com/coderifous/jquery-localize/ 一個(gè)本地化插件
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> <!-- 引用三個(gè)js文件 language_cookie.js實(shí)現(xiàn)記憶功能 下一次用戶刷新界面之后 記得之前用戶使用了那個(gè)語種 --> <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" 固定寫法 對(duì)應(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í)行 本機(jī)執(zhí)行無法獲取需要的json文件 主要的代碼 標(biāo)記處的代碼底層可能使用的是xmlHttpRequest實(shí)現(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 底層實(shí)現(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"); } } });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 簡(jiǎn)單實(shí)現(xiàn)js頁面切換功能
- js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁面效果(類似360默認(rèn)頁面滾動(dòng)切換效果)
- js實(shí)現(xiàn)單一html頁面兩套css切換代碼
- echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例
- 基于JS實(shí)現(xiàn)翻書效果的頁面切換樣式
- 使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法
- javascript單頁面手勢(shì)滑屏切換原理詳解
- JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁面圖片切換功能示例
- jQuery實(shí)現(xiàn)切換頁面過渡動(dòng)畫效果
- JavaScript/jQuery實(shí)現(xiàn)切換頁面效果
相關(guān)文章
jQuery使用動(dòng)態(tài)渲染表單功能完成ajax文件下載
使用ajax實(shí)現(xiàn)文件下載,方便,快捷,時(shí)尚,多么有挑戰(zhàn)的一個(gè)功能,首先獲取url和data然后把參數(shù)組裝成form的input再利用request發(fā)送請(qǐng)求,也就是動(dòng)態(tài)渲染表單,提交表單后再刪除,本例將實(shí)現(xiàn)文件下載功能,感興趣的朋友可以聊解下2013-01-01jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jquery對(duì)象和DOM對(duì)象的區(qū)別介紹
jquery對(duì)象和DOM對(duì)象在使用過程很頻繁,正是因?yàn)槿绱?,好多朋友都不知道它們之間有什么區(qū)別,下面為大家詳細(xì)介紹下,希望對(duì)大家有所幫助2013-08-08基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07jquery隨意添加移除html的實(shí)現(xiàn)代碼
jquery隨意添加移除html的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-06-06jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交
本文給大家分享的是使用jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交的代碼,思路非常不錯(cuò),這里推薦給小伙伴們參考下。2015-07-07JQuery調(diào)用WebServices的方法和4個(gè)實(shí)例
你是不是經(jīng)常作這種開發(fā),前端用JS寫邏輯,后端用aspx或者ashx作服務(wù)?你是不是經(jīng)常在請(qǐng)求aspx的時(shí)候在查詢字符串中拼接諸如a.aspx?method=getDepartmetn¶m1=1¶m2=2的字符串?2014-05-05