多語言切換jquery.i18n.min.js
項目需求，切換多語言，采用
jQuery.i18n.min.js文件內容如下
-------------------------------------------------
/*!
* jquery i18n Plugin v1.0.0
* https://github.com/ZOMAKE/jquery.i18n
*
* Copyright 2017 ZOMAKE,Inc.
* Released under the Apache Licence 2.0
*/
(function($) {
$.fn.extend({
i18n: function(options) {
var defaults = {
defaultLang:"",
filePath:"/i18n/",
filePrefix:"i18n_",
fileSuffix:"",
forever: true,
callback: function() {}
};
function getCookie(name) {
var arr =document.cookie.split(‘; ‘);
var arr1= arr[i].split(‘=‘);
if(arr1[0] == name) {
return arr1[1];
}
}
return ‘‘;
};
function setCookie(name, value,myDay) {
oDate.setDate(oDate.getDate() + myDay);
document.cookie = name+ ‘=‘ + value + ‘; expires=‘ + oDate;
};
var options = $.extend(defaults,options);
if (getCookie(‘i18n_lang‘) != ""&& getCookie(‘i18n_lang‘) != "undefined" &&getCookie(‘i18n_lang‘) != null) {
defaults.defaultLang =getCookie(‘i18n_lang‘);
} else if (options.lang =="" && defaults.defaultLang == "") {
throw "defaultLangmust not be null !";
};
if (options.lang != null &&options.lang != "") {
if (options.forever) {
setCookie(‘i18n_lang‘, options.lang);
} else {
$.removeCookie("i18n_lang");
}
} else {
options.lang =defaults.defaultLang;
};
var i = this;
$.getJSON(options.filePath +options.filePrefix + options.lang + options.fileSuffix + ".json", function(data){
var i18nLang = {};
if (data != null) {
i18nLang= data;
}
$(i).each(function(i) {
vari18nOnly = $(this).attr("i18n-only");
if($(this).val() != null && $(this).val() != "") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "value") {
$(this).val(i18nLang[$(this).attr("i18n")])
}
}
if($(this).html() != null && $(this).html() != "") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "html") {
$(this).html(i18nLang[$(this).attr("i18n")])
}
}
if($(this).attr(‘placeholder‘) != null && $(this).attr(‘placeholder‘) !="") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "placeholder") {
$(this).attr(‘placeholder‘,i18nLang[$(this).attr("i18n")])
}
}
});
options.callback();
});
}
});
})(jQuery);
----------------------------------------------------------------------------------------------------
將語言文件放到webapp的i18n目錄下
i18n_chinese.json類似內容如下
{
"code":"郵編",
"contactTelephone":"聯系電話",
"email":"郵箱"}
i18n_english.json
{
"code":"Code",
"contactTelephone":"ContactTelephone",
"email":"Email"}
想要切換語言 給標簽添加i18n屬性
如<li i18n=" code">郵編</li>
我是通過Cookie方式綁定當前語言的，提取language.jsp如下：
<!DOCTYPE html>
<%@page language="Java"pageEncoding="UTF-8"%>
<script type="text/JavaScript"src="${ctx}/anfangyun/js/jquery.i18n.min.js"></script>
<script>
function setCookieLanguage(name,value) {
document.cookie = name + ‘=‘ + value ;
};
function getCookieLanguage(name) {
vararr = document.cookie.split(‘; ‘);
for(vari = 0; i < arr.length; i++) {
var arr1 = arr[i].split(‘=‘);
if (arr1[0] == name) {
return arr1[1];
}
}
return‘‘;
};
$(function(){
//切換語言begin
//獲取瀏覽器默認語言
var languageType =navigator.browserLanguage?navigator.browserLanguage:navigator.language;
if (languageType.indexOf(‘zh‘)>-1 &&getCookieLanguage("languageCookie")==""){
$("[i18n]").i18n({defaultLang:"chinese"});
}
if (languageType.indexOf(‘en‘)>-1 &&getCookieLanguage("languageCookie")==""){
$("[i18n]").i18n({defaultLang:"english"});
}
if (languageType.indexOf(‘ru‘)>-1 &&getCookieLanguage("languageCookie")==""){
$("[i18n]").i18n({defaultLang:"russian"});
}
//切換為中文 - 按鈕
$("#chinese").click(function() {
$("[i18n]").i18n({defaultLang:"chinese"});//選擇文件i18n_chinese.json
setCookieLanguage("languageCookie","chinese");
});
//切換為英文 - 按鈕
$("#english").click(function() {
$("[i18n]").i18n({defaultLang:"english"});//選擇文件i18n_english.json
setCookieLanguage("languageCookie","english");
});
//切換為俄文 - 按鈕
$("#russian").click(function() {
$("[i18n]").i18n({defaultLang:"russian"});//選擇文件i18n_russian.json
setCookieLanguage("languageCookie","russian");
});
//點擊後有cookie，定位選擇文件名字
if (getCookieLanguage("languageCookie").indexOf("chinese")>-1){
$("#chinese").addClass(‘cur‘);
$("[i18n]").i18n({defaultLang:"chinese"});
//更改頭部圖片
$(".afy_hd_capt").css("background-image","url(${ctx}/anfangyun/images/afy_hd_capt.png)");
$(".afy_hd_dire").css("background-image","url(${ctx}/anfangyun/images/afy_hd_dire.png)");
}
if (getCookieLanguage("languageCookie").indexOf("english")>-1){
$("[i18n]").i18n({defaultLang:"english"});
}
if (getCookieLanguage("languageCookie").indexOf("russian")>-1){
$("[i18n]").i18n({defaultLang:"russian"});
}
//切換語言end
});
</script>
----------------------
本文出自 “leapping” 博客，請務必保留此出處http://leapping.blog.51cto.com/13118659/1946791
多語言切換jquery.i18n.min.js