jquery结合html实现中英文页面切换

这篇文章主要为大家详细介绍了jquery结合html实现中英文页面切换,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

目的：前端（只采用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

   Language  
  MANAGEMENT
SUPPORT
TUTORIAL
FEATURES

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"); } } });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。

以上就是jquery结合html实现中英文页面切换的详细内容，更多请关注0133技术站其它相关文章！