因为在项目目前是验证demo阶段,所以功能能够支持的越多越好

so leader让我添加一个中英文切换功能

经过各种search后,初步实现了这个功能,下面把方法告诉给大家,仅供参考,如果有更好的方案,欢迎告知

1.相关jar包下载

下载jquery.locale.js,下载地址为https://github.com/coderifous/jquery-localize将下载后的包加入到工程中即可使用.

然后web-xml中要加上

default

*.json

用来拦截json格式的数据,因为配置文件是以json文件的格式进行存储的.

2.中英文切换方案

a)  json文件

配置好相关的jar包和web-xml后,我们在工程里对应的目录为相应的语言创建json文件,其中英文定义如下图所示,这里注意中文对应的要使用utf-8的格式进行存储(可以百度转义),否则页面会显示乱码.这里存储为text-zh.json和text-en.json两个文件

英文文件

中文文件

其中如果需要引用某个字段的中英文,则为nav.index此类样式

b)  jsp页面

在header.jsp页面上(这里demo中假设对header进行中英文切换),添加select控件,如下所示,当select值改变后,触发方法chgLang.

中文

ENGLISH

这里,假设修改中英文后,改变导航栏header.jsp的的中英文,所以还需要在nav.jsp里修改显示的值,如下所示.通过我们对每个需要显示的a标签,data-localize属性设置为对应的json文件里字段的名字,比如定义对象,就为data-localize=”nav.defineObj”.

c)  js文件

js文件负责控制页面切换以及coockies记录点击语言历史的功能.其代码如下所示,文件名为language-coockies.js,其中

$("[data-localize]").localize("text", {pathPrefix:"lang", language:"en"});pathPrefix表示json文件路径的前缀,text和en对应文件名text-en.json

var name = "somoveLanguage";

function chgLang() {

var value = $("#ddlSomoveLanguage").children('option:selected').val();

SetCookie(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();

if (uulanguage.indexOf("en") > -1) {

$("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});

}else if (uulanguage.indexOf("zh") > -1) {

$("[data-localize]").localize("text", {pathPrefix: "lang", language: "zh"});

}else{

$("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});

};

if (getCookie(name) != "") {

if (getCookie(name) == "zh") {

$("[data-localize]").localize("text", {pathPrefix: "lang", language: "zh"});

}

if (getCookie(name) == "en") {

$("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});

}

}

}); 设置好后再登录就会出现下面的中英文切换的效果