jq 中英文切换_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

LAGUAGE

日本

ENGLISH

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

}

}

});

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