html+jquery实现页面中英文切换

目的：前端（只采用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" 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 需要在服务器上执行本机执行无法获取需要的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");}}
});

angular实现国际化方案
http://yijiebuyi.com/blog/3b55056c87b73ba606c19e9338dca679.html

html+jquery实现页面中英文切换相关推荐

The Tips - F12开发者页面中英文切换
文章目录 F12开发者页面中英文切换直接按F12-设置 F12开发者页面中英文切换直接按F12-设置首选项 - 语言(匹配语言) 转换英文成功 - 同时设置了主题为酷黑主题,还是刚才那个页面
jenkins页面中英文切换配置
jenkins中英文切换配置 Jenkins--英文切换成中文更新了一下jenkins的war包, 结果启动后成英文的了,后来百度出解决方案: 原文地址:https://blog.csdn.net/ ...
前端国际化，用jquery.i18n完成中英文切换
顾名思义,用jquery.i18n首先需要引入jquery. 头部文件如下 <script src="/assets-new/plugins/jquery/jquery.min.js& ...
HTML如何实现页面中英文切换,关于html页面中怎样实现中英文切换的实例分享
如何实现html页面的双语切换呢?最粗暴的办法是做两个页面,一个中文的,一个英文的.稍微温和的方法是:在每次显示之前,对当前的语言标志进行判断,用if和else来解决,其实,这种办法虽然没有那么粗暴, ...
vue中使用Vue-i18n插件实现页面中英文切换详细教程
1.在项目的根目录中安装插件 npm install vue-i18n 2.新建文件夹与文件存放自己配置的语言包,我这里新建的是lang文件夹 zh.js为中文语言包 en.js为英文语言包文件夹与 ...
i18n国际化（页面中英文切换）
1.基于jquery,先引入jQuery 2.引入jquery.i18n.js(这个源码应该不完全,但是能用) (function ($) {$.fn.extend({i18n: function ( ...
jq 中英文切换_怎样用jquery/js 实现中英文切换的功能?
中英切换中文英文早上好 // 中文 var zh_word = { index: { //页面这里只是为了比较容易分组 ,也可以再细化分组 nav: "导航", top: ...
自定义LocaleResolver实现页面中英文切换
文章目录 1.配置i18n(国际化)文件 2.页面设置值 3.编写自定义的LocaleResolver组件 4.注意点 1.配置i18n(国际化)文件建立login和login_en_US时会自动生 ...
正则表达式split匹配多种例如 “】”，“，”两种（页面级中英文切换方案）...
在做登陆界面的时候,因为涉及到中英文因为前后台已经分离,所以前端需要自行设计中英文做法: 编写两个文件,一个中文文件,一个是英文文件,分别放在对应的目录下面文件的内容 {"login& ...

html+jquery实现页面中英文切换

目的：前端（只采用thymeleaf模板+jquery）实现国际化

html+jquery实现页面中英文切换相关推荐

最新文章

热门文章

html+jquery实现页面中英文切换

目的： 前端（只采用thymeleaf模板+jquery） 实现国际化

html+jquery实现页面中英文切换相关推荐

最新文章

热门文章

目的：前端（只采用thymeleaf模板+jquery）实现国际化