基于jQuery.i18n.properties实现前端网站语言多版本
我是参考播客做了个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
上传上去了，但是不知道怎么引用这个下载连接...
基于jQuery.i18n.properties实现前端网站语言多版本的更多相关文章
- 【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
- jquery.i18n.properties前端国际化解决方案“填坑日记”
但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...
- 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”
前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
jQuery.i18n.properties 简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...
- jQuery之前端国际化jQuery.i18n.properties
jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...
- jQuery之前端国际化jQuery.i18n.properties[转]
http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/ jQuery.i18n.properties是一款轻量级的jQuery国际 ...
- Web前端国际化之jQuery.i18n.properties
Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...
- jquery.i18n.properties前端国际化方案
如果新项目要做系统国际化, 时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl ...
- 本地化web开发的一个例子-jquery.i18n.properties
关键字:Web本地化, jquery,jquery.i18n.properties. 运行环境:Chrome, IE. 本文介绍使用jquery.i18n.properties对网站前端实现本地化,支 ...
随机推荐
- Solrj调用Solr API
在MyEclipse下的SSH项目,要调用Solr接口进行操作. 1.先运行solr 2.在已搭建好的SSH项目中用Solrj调用Solr的接口 3.导入如下solr的jar包到搭建好的SSH项目的W ...
- 百视通与微软共同宣布9月在华发布Xbox One
4月30日消息,百视通今日与微软共同宣布,于今年9月在华发布Xbox One.这是继百视通与微软2013年9月成立合资公司后,双方合作的又一进展. 微软副总裁,硬件及设计工作室部门主管尤瑟夫 •梅赫迪 ...
- Sysinternals Suite 2014.08.18
Windows Sysinternals Suite 是一套由微软官方免费提供的系统工具集,其中包含了大量超级实的优秀绿色小软件,譬如 Desktops (虚拟桌面).Process Explorer ...
- 根据redis的pub/sub机制，写一个即时在线聊天应用
在Redis中,有个Pub/Sub,他的主要的工作流程如: redis订阅一个模式频道如:chat_*,然后由小a想找人聊天了,就发送一个消息“现在有人聊天吗?chat_a”,末尾的chat_a为标识 ...
- 转：AMD规范与CMD规范的区别是什么？
AMD规范与CMD规范的区别是什么? 在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...
- Android PopupWindow中EditText获取焦点自动弹出软键盘
公司的项目中要求在点击搜索的时候弹出一个搜索框,搜索框中有一个EditText,用于数据搜索关键字,要求在弹出PopupWindow的时候自动弹出软键盘,原以为只要写上着两行代码可以搞的问题: Inp ...
- matlab max()
max()函数 (1)可以找出矩阵元素中每列的最大值 max(A) ,max(A,[],dim ),带返回值的[C,I]=max(A).[C,I]=max(A,[],dim) max(A,[],dim ...
- show point on image
show point on image... for ( int i = 0; i < probp.size(); i++ ) { cv::Point pt = probp[i]; Distan ...
- TJU Problem 2857 Digit Sorting
原题: 2857. Digit Sorting Time Limit: 1.0 Seconds Memory Limit: 65536KTotal Runs: 3234 Accepted ...
- ZOJ - 3216：Compositions （DP&矩阵乘法&快速幂）
We consider problems concerning the number of ways in which a number can be written as a sum. If the ...