基于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对网站前端实现本地化,支 ...
随机推荐
- bzoj1601
题解: 简单生成树 代码: #include<bits/stdc++.h> using namespace std; ; int n,dis[N],f[N],a[N][N],ans; in ...
- bzoj1088 [SCOI2005]扫雷
题解: 首先枚举第一个有木有雷 然后第二个可以通过第一个推,第三个也是 以此类推 最后判断是否合法 代码: #include<bits/stdc++.h> using namespace ...
- 传递数据后创建后台service来处理事件！
package com.lixu.service; import android.app.Service; import android.content.Intent; import android. ...
- 【转】POJ百道水题列表
以下是poj百道水题,新手可以考虑从这里刷起 搜索1002 Fire Net1004 Anagrams by Stack1005 Jugs1008 Gnome Tetravex1091 Knight ...
- Swift语法笔记
Guard guard是一种条件判断语句,可以类比if.assert.如果条件不符合,guard的else语句就运行,从而退出这个函数. 具体写法如下: func fooGuard(x: Int?) ...
- 第一个dubbo+zookeeper项目例子
公司项目要用这两个东西,于是打算学习它. 首先我的理解dubbo是什么?zookeeper是什么?为什要这么搞. 项目分层: 传统的,mvc -->垂直架构(将模块抽取成单独项目,项目互相调用) ...
- the usage of String
经典算法:(整理汇总) 1)如何快速倒叙: public static char[] reverseArray(char[] c){ char t; for(int i=0;i<c.length ...
- python @修饰符的几种用法
http://www.360doc.com/content/17/0715/16/10408243_671545922.shtml http://www.cnblogs.com/Egbertbaron ...
- SSH项目搭建（四）——Maven的pom.xml配置
史上最全的maven的pom.xml文件详解: https://www.cnblogs.com/qq765065332/p/9238135.html 下面的节点有不理解是啥意思的可以到上面链接的文章里 ...
- [LeetCode&Python] Problem 804. Unique Morse Code Words
International Morse Code defines a standard encoding where each letter is mapped to a series of dots ...