背景：
我的项目是已经完成的项目，因为要拓展海外市场，需要支持英文。
采用的方式是添加配置文件，见下文详细步骤。
本文基本转自：http://blog.csdn.net/wuhawang/article/details/52228589
在他的基础上给大家一点提示补充：
1.将需要的js文件与其他公共js一起加载；
2.js中部分中文需要改写代码根据按钮取值来显示；
3.注意全局方法中的中文名不要忘记替换；
4.log日志不要改后台，直接再写一个js去匹配中文即可
5.个别插件会自动根据浏览器语言来展示按钮名称，设置浏览器默认的语言即可
下面为转载内容：
1.相关jar包下载
下载jquery.locale.js,下载地址为 https://github.com/coderifous/jquery-localize 将下载后的包加入到工程中即可使用.
然后web-xml中要加上
- <servlet-mapping>
- <servlet-name>default</servlet-name>
- <url-pattern>*.json</url-pattern>
- </servlet-mapping>
<servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.json</url-pattern>
</servlet-mapping>
用来拦截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.
- <select id="ddlSomoveLanguage" onchange="chgLang();">
- <option value="zh">中文</option>
- <option value="en">ENGLISH</option>
- </select>
<select id="ddlSomoveLanguage" οnchange="chgLang();"><option value="zh">中文</option><option value="en">ENGLISH</option>
</select>
这里,假设修改中英文后,改变导航栏header.jsp的的中英文,所以还需要在nav.jsp里修改显示的值,如下所示.通过我们对每个需要显示的a标签,data-localize属性设置为对应的json文件里字段的名字,比如定义对象,就为data-localize=”nav.defineObj”.
- <ul class="dropdown-menu">
- <li><a id="action-1" data-localize="nav.defineObj" href="IdeJsp/defineObjSelect.jsp"></a></li>
- <li><a data-localize="nav.defineTable" href="IdeJsp/defineTab.jsp"></a></li>
- <li><a data-localize="nav.operateSql" href="IdeJsp/ideSql.jsp"></a></li>
- </ul>
<ul class="dropdown-menu"><li><a id="action-1" data-localize="nav.defineObj" href="IdeJsp/defineObjSelect.jsp"></a></li><li><a data-localize="nav.defineTable" href="IdeJsp/defineTab.jsp"></a></li><li><a data-localize="nav.operateSql" href="IdeJsp/ideSql.jsp"></a></li>
</ul>
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"});
- }
- }
- });
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"}); }}});
