我是参考播客做了个demo：http://blog.csdn.net/aixiaoyang168/article/details/49336709
jQuery.i18n.properties采用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件首先加载默认的资源文件（strings.properties），然后加载针对特定语言环境的资源文件（strings_zh.properties），这就保证了在未提供某种语言的翻译时，默认值始终有效。
一、demo代码：
首页index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title class="i18n" name=‘title‘></title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
.lan1{
float: left;
}
.lan2{
float: right;
margin-right: 100px;
}
</style>
</head>
<body>
<div>
<div class="lan1"><label class="i18n" name="lan"></label></div>
<div class="lan2">
<select id="language">
<option value="zh-CN">中文简体</option>
<option value="zh-TW">中文繁體</option>
<option value="en">English</option>
</select>
</div>
</div>
<br>
<hr>
<div><label class="i18n" name="hellomsg1"></label><label class="i18n" name="hellomsg2"></label></div><br>
<div><label class="i18n" name="commonmsg1"></label><label class="i18n" name="commonmsg2"></label></div><br>
<div>
<input type="search" class="i18n-input" selectname="searchPlaceholder" selectattr="placeholder">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.i18n.properties.min.js"></script>
<script src="js/language.js"></script>
</body>
</html>
language.js:
/**
* cookie操作
1.name and value given , set cookie;
2.name given, value is null, delete cookie;
3.name given, value is undefined, get 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.substr(0,2);
}
return false;
}
/**
* 设置语言类型： 默认为中文
*/
var i18nLanguage = "zh-CN";
/*
设置一下网站支持的语言种类
*/
var webLanguage = [‘zh-CN‘, ‘zh-TW‘, ‘en‘, ‘zh‘];
/**
* 执行页面i18n方法
* @return
*/
var execI18n = function(){
/*
首先获取用户浏览器设备之前选择过的语言类型
*/
if (getCookie("Language")) {
i18nLanguage = getCookie("Language");
} else {
// 获取浏览器语言
var navLanguage = getNavLanguage();
if (navLanguage) {
// 判断是否在网站支持语言数组里
var charSize = $.inArray(navLanguage, webLanguage);
if (charSize > -1) {
i18nLanguage = navLanguage;
getCookie("Language",navLanguage,{ // 存到缓存中
expires: 30,
path:‘/‘
});
};
} else{
console.log("not navigator");
return false;
}
}
/* 需要引入 i18n 文件*/
if ($.i18n == undefined) {
console.log("请引入jquery.i18n.properties.js文件")
return false;
};
/*
这里需要进行i18n的翻译
*/
jQuery.i18n.properties({
name: ‘opqt‘,
path: ‘i18n/‘,
mode : ‘map‘, //用Map的方式使用资源文件中的值
language : i18nLanguage,
cache:false,
encoding: ‘UTF-8‘,
callback : function() { //加载成功后设置显示内容
var insertEle = $(".i18n");
console.log(".i18n 写入中...");
insertEle.each(function() {
$(this).html($.i18n.prop($(this).attr(‘name‘))); // 根据i18n元素的 name 获取内容写入
});
console.log("写入完毕");
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").on(‘change‘, function() {
var language = $(this).children(‘option:selected‘).val()
getCookie("Language",language,{
expires: 30,
path:‘/‘
});
location.reload();
});
});
因为中文和繁体文拷贝到properties文件中就变成了unicode字符了，不认得，拷贝英文的一份：
opqt_en.properties：
title=i18n Resource Internationalization lan=Language\uFF1A hellomsg1=Index message: hellomsg2=Hello word! This is index message! searchPlaceholder=Please input serach information commonmsg1=Common message: commonmsg2=This is common message!
其他中文和繁体文：把原播客里面的贴过来吧：
opqt.properties、opqt_zh.properties、opqt_zh_CN.properties:
title=i18n资源国际化 lan=语言选择： hellomsg1=首页消息: hellomsg2=资源国际化！这是首页消息! searchPlaceholder=请输入搜索信息 commonmsg1=通用消息: commonmsg2=资源国际化!这是通用消息哦!
opqt_zh_TW.properties:
title=i18n資源國際化 lan=語言選擇： hellomsg1=首頁消息: hellomsg2=資源國際化! 这是首頁消息！ searchPlaceholder=請輸入搜索信息 commonmsg1=通用消息: commonmsg2=資源國際化!這是通用消息哦!
二、原文中代码解释：
label class=”i18n” name=”hellomsg1”这里面class=”i18n”写法，下边在js里面我们可以根据类选择器获取需要国际化的地方，然后name=”hellomsg1”这里面的hellomsg1跟资源文件里面的key保持一致。获取方式二：input type=”search” class=”i18n-input” selectname=”searchPlaceholder” selectattr=”placeholder”这里面的class=”i18n-input”写法，跟上边的区别就是可以给html标签的任何属性可以赋值，例如placeholder，name，id什么的都可以，selectattr=”placeholder”里面的placeholder就是要赋值的属性，selectname=”searchPlaceholder”里面的searchPlaceholder跟资源文件里面的key保持一致。
效果图：
http://localhost:8080/jqueryi18n/index.html
源代码：上传到博客资源里面；jqueryi18n.rar
上传上去了，但是不知道怎么引用这个下载连接...
时间： 2024-10-26 04:33:30