前台i18n国际化
程序结构及效果
lang.html代码如下
代码解析：
要实现国际化首先要有3个js文件，jquery.js和jquery.i18n.properties.js文件均是开源的 网上可以下载。
language.js 是别人写的，我就稍微改了点东西。
language.js 代码如下：
/**
* cookie操作
*/
var getCookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var s = [cookie, expires, path, domain, secure].join('');
var secure = options.secure ? '; secure' : '';
var c = [name, '=', encodeURIComponent(value)].join('');
var cookie = [c, expires, path, domain, secure].join('')
document.cookie = cookie;
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
/**
* 获取浏览器语言类型
* @return {string} 浏览器国家语言
*/
var getNavLanguage = function(){
if(navigator.appName == "Netscape"){
var navLanguage = navigator.language;
return navLanguage;
}
return false;
}
/**
* 设置语言类型： 默认为中文
*/
var i18nLanguage = "zh-CN";
/*
设置一下网站支持的语言种类
*/
var webLanguage = ['zh-CN', 'zh-TW', 'en'];
/**
* 执行页面i18n方法
* @return
*/
var execI18n = function(){
/*
获取一下资源文件名
*/
var optionEle = $("#i18n_pagename");
if (optionEle.length < 1) {
console.log("未找到页面名称元素，请在页面写入\n <meta id=\"i18n_pagename\" content=\"页面名(对应语言包的语言文件名)\">");
return false;
};
var sourceName = optionEle.attr('content');
sourceName = sourceName.split('-');
/*
首先获取用户浏览器设备之前选择过的语言类型
*/
if (getCookie("userLanguage")) {
i18nLanguage = getCookie("userLanguage");
} else {
// 获取浏览器语言
var navLanguage = getNavLanguage();
if (navLanguage) {
// 判断是否在网站支持语言数组里
var charSize = $.inArray(navLanguage, webLanguage);
if (charSize > -1) {
i18nLanguage = navLanguage;
// 存到缓存中
getCookie("userLanguage",navLanguage);
};
} else{
console.log("not navigator");
return false;
}
}
/* 需要引入 i18n 文件*/
if ($.i18n == undefined) {
console.log("请引入i18n js 文件")
return false;
};
/*
这里需要进行i18n的翻译
*/
jQuery.i18n.properties({
name : sourceName, //资源文件名称
path : 'i18n/' + i18nLanguage +'/', //资源文件路径
mode : 'map', //用Map的方式使用资源文件中的值
language : i18nLanguage,
callback : function() {
$("[data-locale]").each(function(){
var a=$(this).text();
//console.log($(this).data("locale"));
$(this).html($.i18n.prop($(this).data("locale")));
});
var insertEle = $(".i18n");
console.log(".i18n 写入中...");
insertEle.each(function() {
// 根据i18n元素的 name 获取内容写入
$(this).html($.i18n.prop($(this).attr('name')));
});
console.log("写入完毕");
// //测试一下button的数据写入
//测试一下button的数据写入
var buttonEle = $(".testbut");
console.log("button写入中...");
buttonEle.each(function(){
//测试一下button的按钮是不是可以直接加数据进去
$(this).html($.i18n.prop($(this).attr("buttontest")));
});
//测试一下span的数据写入 用id的办法
var buttonEle = $("#testspan");
console.log("button写入中...");
buttonEle.each(function(){
//测试一下span是不是可以直接加数据进去
$(this).html($.i18n.prop($(this).attr("testspan")));
});
// console.log(".i18n-input 写入中...");
// var insertInputEle = $(".i18n-input");
// insertInputEle.each(function() {
// var selectAttr = $(this).attr('selectattr');
// if (!selectAttr) {
// selectAttr = "value";
// };
// $(this).attr(selectAttr, $.i18n.prop($(this).attr('selectname')));
// });
console.log("写入完毕");
}
});
}
/*页面执行加载执行*/
$(function(){
/*执行I18n翻译*/
execI18n();
/*将语言选择默认选中缓存中的值*/
$("#language option[value="+i18nLanguage+"]").attr("selected",true);
/* 选择语言 */
$("#language").bind('change', function() {
var language = $(this).children('option:selected').val()
console.log(language);
getCookie("userLanguage",language,{
expires: 30,
path:'/'
});
location.reload();
});
});
lang.html中代表默认页面的语言显示。
指示出要找什么样名的语言文件，例如：
这部分是利用class来寻找对应文件中的应语言，需要在language.js中的jQuery.i18n.properties({})部分设定：
lang.html中代表通过id寻找对应语言
在language.js中需要如下设定
lang.html中代表自定义标签寻找语言。
其中data-locale为自己写的标签，i18n_detailData就是翻译文件中的具体内容，后面的name不需要写。
最后就是配置的翻译文件了。
这其中就是中文的翻译内容，如下：
cmsg1=公共消息
cmsg2=这是公共消息！
cmsg3=这是测试！
buttontest=这个一个按钮的测试！
testspan1=这是一个span的测试
lan=选择语言
i18n_detailData=test哈哈这其中的代码如下:
cmsg1=Common message:
cmsg2=This is common message!
cmsg3=This is Test!
buttontest=this is buttontest!
testspan1=this is testspan！
lan=Choice language
i18n_detailData=test hhhhhhhhh