本文原创地址:http://www.cnblogs.com/landeanfen/p/7581609.html
以下是本人使用流程:
1.下载jquery.i18n
链接:https://pan.baidu.com/s/1aN1_0Csii3K9S5fLy5MldQ
提取码:vs8x
包含文件:jquery.i18n.properties.js、jquery.i18n.properties.min.js、language.extensions.js 后续操作需要用到
2.创建资源文件
在项目中创建资源文件,如下图:
这里设置了中文(en)和英文(zh-CN),文件名后缀需指定.properties.
需要设置切换的资源可保存在此文件中格式如下:
3.页面配置
引入:jq、jquery.i18n.properties.js、language.extensions.js文件。
jquery.i18n.properties.js、language.extensions.js文件在1步骤中的网盘有提供。
切换语言时将所选语言存入Cookie中,建议每次触发时先判断该Cookie是否为空,有值的话先清空,不然有的电脑IE可能会出现问题。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="ChangeLanguage">
<option value="zh-CN">中文</option>
<option value="en">English</option>
</select>
<h1 data-i18n-text="Name"></h1>
<input type="text" data-i18n-value="Name" name="name" value="" />
</body>
</html>
<script src="Content/jquery-2.1.1.js"></script>
<script src="Content/i18n/jquery.i18n.properties.js"></script>
<script src="Content/i18n/language.extensions.js"></script>
<script>
$(function () {
var languageCookie = getCookie("userLanguage");
if (languageCookie) {
$("#ChangeLanguage").find("option").each(function (i) {
let $this = $(this).val();
if ($this == languageCookie) {
$(this).attr("selected", true);
}
})
}
$("#ChangeLanguage").change(function () {
let $this = $(this).val();
//在切换语言Cookie时,如果已经存在该Cookie则先清除
if (languageCookie) {
getCookie("userLanguage", null)
}
//存入Cookie
getCookie("userLanguage", $this, {
expires: 1440,
path: '/'
});
window.location.reload();
})
})
</script>
注意:在运行时前端jq会出现报错或警告,因为properties文件类型无法识别,需要手动将该文件类型加入可识别文件类型。如:
<system.webServer>
<staticContent>
<!--加载中英文切换-->
<mimeMap fileExtension=".properties" mimeType="application/x-javascript"/>
</staticContent>
</system.webServer>
关于language.extensions.js代码是作者封装了i18n,使调用更加方便。
///**
// * 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++) {
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.substr(0, 2);
}
return false;
};
/**
* 设置语言类型: 默认为英文
*/
var i18nLanguage = "en";
/*
设置一下网站支持的语言种类
*/
var webLanguage = ['zh-CN', '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: 'common',//文件名称
path: '/Content/i18n/' + i18nLanguage + '/', //资源文件路径
mode: 'map', //用Map的方式使用资源文件中的值
language: i18nLanguage,
callback: function () {//加载成功后设置显示内容
//console.log("i18n赋值中...");
try {
//初始化页面元素
$('[data-i18n-placeholder]').each(function () {
$(this).attr('placeholder', $.i18n.prop($(this).data("i18n-placeholder")));
});
$('[data-i18n-text]').each(function () {
//如果text里面还有html需要过滤掉
var html = $(this).html();
var reg = /<(.*)>/;
if (reg.test(html)) {
var htmlValue = reg.exec(html)[0];
$(this).html(htmlValue + $.i18n.prop($(this).data('i18n-text')));
}
else {
$(this).text($.i18n.prop($(this).data('i18n-text')));
}
});
$('[data-i18n-value]').each(function () {
$(this).val($.i18n.prop($(this).data('i18n-value')));
});
}
catch (ex) {
console.log(ex);
}
//console.log("i18n写入完毕");
}
});
};
/*页面执行加载执行*/
$(function () {
/*执行I18n翻译*/
execI18n();
});
效果图: