基于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对网站前端实现本地化,支 ...
随机推荐
- 练习vue（用户管理）1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bzoj1053&&51nod1060
题解: 其实就是求1-n之中拥有最多约数的数 一个数x的质因数分解为p1^e1*p2^e2*...*pn^en,则正因数的个数为(e1+1)(e2+1)...(en+1) 那么发现,正因数的个数和p没 ...
- hibernate一对一关联
hibernate一对一主键关联 一对一主键关联指的是两个表通过主键形成的一对一映射. 数据表要求:A表的主键也是B表的主键同时B表的主键也是A表的外键 sql: create table peopl ...
- 在eclipse中创建web项目(非myeclipse)
如何创建dynamic web project项目 本文的演示是从本地文件创建dynamic web project,从svn检出的同时创建dynamic web project于此类似.我们推荐使用 ...
- 显式（静态）调用： LIB + DLL + .H
1.编程时用ad.h,ad.lib,放在项目当前目录里2.在头文件中加入#include "ad.h"3.在Project Setting–>Link–>Object/ ...
- OC基础:block.字面量 分类： ios学习 OC 2015-06-22 19:08 155人阅读 评论(0) 收藏
block 块语法,可以用block去保存一段代码,或者封装一段代码. block 实际是由c语言实现的,执行效率很高. block 实际借鉴了函数指针的语法. block,在多线程.异步任务,集合遍 ...
- 按照Right-BICEP要求设计四则运算2程序的单元测试用例
Right——结果是否正确? B——是否所有的边界条件都是正确的? I——能查一下反响关联吗? C——能用其它手段交叉检查一下吗? E——你是否可以强制错误条件发生? P——是否满足性能要求? 测试计 ...
- Eclipse SVN 使用教程
Eclipse SVN 使用教程 做好以上的准备后打开Eclipse编译器,点击编译器右上角的Open Perspective 打开SVN资源库界面,新建一个资源库 选择资源库的位置,这里我们就用刚才 ...
- （6）time&datetime(时间模块)
什么是时间模块 就是处理时间相关的功能 如用户注册的时间.统计程序运行的时间等 time 模块 计算机中有三种时间 1.时间戳 从1970年到今天,这个时间段中间经历的秒数 获取时间戳:time.t ...
- python 常见的内置函数
内置函数 接下来,我们就一起来看看python里的内置函数.截止到python版本3.6.2,现在python一共为我们提供了68个内置函数.它们就是python提供给你直接可以拿来使用的所有函数.这 ...