前端国际化,用jquery.i18n完成中英文切换

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yuyuking/article/details/77989141


顾名思义,用jquery.i18n首先需要引入jquery。

头部文件如下

<script src="/assets-new/plugins/jquery/jquery.min.js"></script>

<script src="/assetsnew/jquery.i18n.js"></script>
<script src="/assetsnew/lang-en.js"></script>//英文js

主要内容:

<ol class="breadcrumb">
      <li class="breadcrumb-item" id="ex1">你好</li>
       <li class="breadcrumb-item active" id="ex2">欢迎</li>
</ol>
lang-en.js如下:

	i18n_dict = {
		"你好": "hellow",
		"欢迎": "welcome",

	};
	$.i18n.load(i18n_dict);
	var en = function(event) {
		//		公共部分
		$('#ex1')._t('你好');
		$('#ex2')._t('欢迎');
		
	};
	$('#translate_button').click(function () {//点击按钮时进行语言切换
		en();		
	});

思路扩展:想下次进来还是上一次选择的语言可以加一个cookie

优点:在进行语言切换时,速度很快,不会进行页面刷新。适合静态页面使用。

缺点:当页面中有动态注入的内容时可能会出现翻译不了的情况。每个需要翻译的地方都要加一个id或class,比较麻烦。





展开阅读全文

没有更多推荐了,返回首页