【探索】用js打语言包（使用jquery.i18n.properties）

最新推荐文章于 2021-09-02 20:46:09 发布

VIP文章 snow_finland

最新推荐文章于 2021-09-02 20:46:09 发布

阅读量9k

点赞数 2

本文链接：https://blog.csdn.net/snow_finland/article/details/47753773

版权

网站为了国际化的需要，会使用到语言包。

博主之前用到过的语言包都是依靠后端语言或者模板语言进行的语言包，当然js部分中使用的文案会用到js自己的语言包，不过会通过后端语言动态加载中文or英文的js语言包。

这次尝试用js来打语言包，用到了插件 jquery.i18n.properties ，很明显，使用这个插件需要先加载jquery。

那就来看一下具体代码吧：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>js 语言包测试</title>
<style>
.zh .zh_png{
	display:block;
}
.zh .en_png{
	display:none;
}
.en .zh_png{
	display:none;
}
.en .en_png{
	display:block;
}

.img_bg{
	background-position:0 0;
	width:30px;
	height:30px;
}
.zh .img_bg{
	background-image:url('img/img_bg_zh.png');
}
.en .img_bg{
	background-image:url('img/img_bg_en.png');
}
</style>
</head>

<body class="zh">
<div class="wrap">
	<h1 data-lang="string_lang1">标题</h1>
	<p data-lang="string_lang2">段落内容，balabala</p>
    <ul class="nav">
    	<li><a data-lang="string_lang3">导航1</a></li>
        <li><a data-lang="string_lang4">导航2</a></li>
        <li><a data-lang="string_lang5">导航3</a></li>
        <li><a data-lang="string_lang6">导航4</a></li>
    </ul>
	<img class="zh_png" src="img/img1_zh.png" />
	<img class="en_png" src="img/img1_en.png" />
    <div class="screen1">
    	<div class="inner">
        	<h1 data-lang="string_lang7">第一屏</h1>
        	<p data-lang="string_lang8">第一屏内容</p>
        </div>
    </div>
	<div class="img_bg"></div>
</div>
<a id="J_lang_switch" data-lang="string_lang9">切换到英文</a>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="js/jquery.i18n.properties-1.0.9.js"></script>
<script>
var language_pack = {
	now_lang : 0, // 0:ch,1:en
	loadProperties : function(new_lang){
		var self = this;
		var tmp_lang = '';
		if(new_lang == 0){
			tmp_lang = 'zh';
			$('body').removeClass('en').addClass('zh');
		}else{
			tmp_lang = 'en';
			$('body').removeClass('zh').addClass('en');
		}
		jQuery.i18n.properties({//加载资浏览器语言对应的资源文件
			name: 'strings', //资源文件名称
			path:'language/', //资源文件路径
			language: tmp_lang,
			cache: false,
			mode:'map', //用Map的方式使用资源文件中的值
			callback: function() {//加载成功后设置显示内容
				for(var i in $.i18n.map){
					$('[data-lang="'+i+'"]').text($.i18n.map[i]);
				}
				document.title = $.i18n.map['string_title'];
			}
		});
		self.now_lang = new_lang;
	}
}
$(document).ready(function(){
	language_pack.loadProperties(0);
	
	$('#J_lang_switch').click(function(){
		var new_lang;
		if(language_pack.now_lang == 0){
			new_lang = 1;
		}else{
			new_lang = 0;
		}
		language_pack.loadProperties(new_lang);
	});
});
</script>
</body>
</html>

jquery.i18n.properties-1.0.9.js

/******************************************************************************
 * jquery.i18n.properties
 * 
 * Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and 
 * MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
 * 
 * @version     1.0.x
 * @author      Nuno Fernandes
 * @url         www.codingwithcoffee.com
 * @inspiration Localisation assistance for jQuery (http://keith-wood.name/localisation.html)
 *              by Keith Wood (kbwood{at}iinet.com.au) June 2007
 * 
 *****************************************************************************/

(function($) {
$.i18n = {};

/** Map holding bundle keys (if mode: 'map') */
$.i18n.map = {};
    
/**
 * Load and parse message bundle files (.properties),
 * making bundles keys available as javascript variables.
 * 
 * i18n files are named <name>.js, or <name>_<language>.js or <name>_<language>_<country>.js
 * Where:
 *      The <language> argument is a valid ISO Language Code. These codes are the lower-case, 
 *      two-letter codes as defined by ISO-639. You can find a full list of these codes at a 
 *      number of sites, such as: http://www.loc.gov/standards/iso639-2/englangn.html
 *      The <country> argument is a valid ISO Country Code. These codes are the upper-case,
 *      two-letter codes as defined by ISO-3166. You can find a full list of these codes at a
 *      number of sites, such as: http://www.iso.ch/iso/en/

最低0.47元/天解锁文章

snow_finland

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
【探索】用js打语言包（使用jquery.i18n.properties）

网站为了国际化的需要，会使用到语言包。博主之前用到过的语言包都是依靠后端语言或者模板语言进行的语言包，当然js部分中使用的文案会用到js自己的语言包，不过会通过后端语言动态加载中文or英文的js语言包。这次尝试用js来打语言包，用到了插件 jquery.i18n.properties ，很明显，使用这个插件需要先加载jquery。那就来看一下具体代码吧：
复制链接

扫一扫