因爲在項目目前是驗證demo階段,所以功能能夠支持的越多越好
so leader讓我添加一箇中英文切換功能
經過各種search後,初步實現了這個功能,下面把方法告訴給大家,僅供參考,如果有更好的方案,歡迎告知
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>
用來攔截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" ο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>
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"});
}
}
});
設置好後再登錄就會出現下面的中英文切換的效果