实现
说明:以下所代码自己测试在firefox新版本和ie8中有效,如果自己测试兼容性不好,请网友们自己改一下代码吧
文档目录
languagetest/
├───test.html
├───zh.css
└───en.css
原理
三种方法都是通过加载对应语言的css来实现,一般在vc或其它程序嵌套浏览器内核中使用不了cookie来存放当前设置的语言(我同事那个不行,他是通过读取注册表来设置的),读取当前设置的语言部分在本文中不体现。
第一种
代码如下test.html:
- <!doctype html>
- <html>
- <head>
- <script>
- //创建一个link来引入控制语言的css
- function languageLink (type) {
- var link = document.createElement(\'link\');
- link.id = "lang";
- link.type = "text/css";
- link.rel = "stylesheet";
- link.href = type+".css";
- link.langType = type;
- return link;
- }
- //根据语言类型切换
- function changeLang(type){
- var defaultLang = "zh";
- if(type) defaultLang= type;
- var link = document.getElementById(\'lang\');
- if(link) {
- if(link.langType == defaultLang) return;
- link.parentNode.removeChild(link);
- }
- var head = document.getElementsByTagName(\'head\');
- head[0].appendChild(languageLink(defaultLang));
- }
- //文档加载到这里时加载默认语言
- +function () {
- changeLang();
- }();
- //toggle 两种语言切换
- function changeLanguage (){
- var link = document.getElementById(\'lang\');
- var currentLangType = \'zh\';
- if(link){
- var langtype = link.langType;
- switch(langtype){
- case \'zh\': currentLangType = \'en\';break;
- case \'en\': currentLangType = \'zh\';break;
- }
- }
- changeLang(currentLangType);
- }
- </script>
- </head>
- <body>
- <button onclick="changeLanguage()">切换</button>
- <button onclick="changeLang(\'en\')">英文</button>
- <button onclick="changeLang(\'zh\')">中文</button>
- <span style="font-size:14px;"><strong></strong></span><pre name="code" class="html"><!-- 一种方法 显示隐藏元素法-->
- <!-- 第二种方法 利用伪元素显示属性法-->
- <h2>另一种方法 显示隐藏元素法 该方法比较合适,麻烦一点点</h2>
- <div><span class="language-zh">我是中文</span><span class="language-en"> i am English</span></div>
- <div><span class="language-zh">我是中文111</span><span class="language-en"> i am English111</span></div>
- <br/>
- <br/>
- <br/>
- <h2>两种方法都是通过切换css实现</h2>
- </body>
- </html>
zh.css:
- <span style="font-size:14px;"><strong><span style="font-size:14px;"><strong></strong></span></strong></span><pre name="code" class="css">/* 显示lang-zh属性内容 */
- /* 隐藏英文 */
en.css:
- /* 显示lang-en属性内容 */
- .language:before{
- content:attr(lang-en);
- }
- /* 隐藏中文 */
- .language-zh{
- display:none;
- }
代码同上(第一种方法)
第三种方法
下面就介绍第三种方法
由于上面两种方法都是把语言写在html中,这样不容易维护和实现更多种语言,其实我们可以将语言包定义为css文件,通过切换css来实现不同语言的展现。下面看一下代码片段:
test.html
下面是一个展示姓名和地址表单的列表
- <table>
- <tr>
- <td><label for="name"><span class="language-name"></span></label></td>
- <pre class="html" name="code"> <td><label for="address"><span class="language-address"></span></label></td>
- </tr>
- <tr>
- <td><input type="text" id="name" name="name"/></td>
- <td><input type="text" id="address" name="address"/></td>
- </tr>
zh.css
- .language-name:before{
- content:"名称";
- }
- .language-address:before{
- content:"地址";
- }
- .language-name:before{
- content:"name";
- }
- .language-address:before{
- content:"address";
- }
原理不多说了,就是css引用的切换。至于css的伪元素有不太明白的自行查询一下吧。
前端开发中的多语言切换,可使用js动态替换内容
1、在用户点击切换语言后,把选择的语言版本保存在cookie中
//写入cookie函数
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//获取cookie
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//setCookie(\'lan\',\'hk\'); 繁体中文
//setCookie(\'lan\',\'cn\'); 简体中文
//setCookie(\'lan\',\'en\'); 英文
2、在包含静态文本的标签中,添加一个属性:set-lan=”html:name”
属性值中的html代表内容的位置,name代表要替换的文字的标识
例如:
<span set-lan="html:name">名字</span>
<input type="text" value="名字" set-lan="val:name" />
这些就需要前端工程师在开发过程中添加进去,并且,要切换语言文字的外面都必须要有一个标签包裹,否则无法进行切换;
如:
<span set-lan="html:name"><i class="icon"></i>名字</span>
这样的代码,是无法把“名字”替换成“Name”的,会把“名字”前面的i标签也一起替换掉,如果不想把i标签也替换掉,就要在“名字”外面添加一个标签,改成:
<span><i class="icon"></i><lan set-lan="html:name">名字</lan></span>
3、定义3个语言的标识+内容的json字符串
var cn = {
"name" : "姓名",
"tel" : "电话",
"email" : "邮箱",
};
var hk = {
"name" : "姓名",
"tel" : "電話",
"email" : "郵箱",
};
var en = {
"name" : "Name",
"tel" : "Tel",
"email" : "Email",
};
4、遍历带set-lan属性的标签,进行文本替换
$(\'[set-lan]\').each(function(){
var me = $(this);
var a = me.attr(\'set-lan\').split(\':\');
var p = a[0]; //文字放置位置
var m = a[1]; //文字的标识
//用户选择语言后保存在cookie中,这里读取cookie中的语言版本
var lan = getCookie(\'lan\');
//选取语言文字
switch(lan){
case \'cn\':
var t = cn[m]; //这里cn[m]中的cn是上面定义的json字符串的变量名,m是json中的键,用此方式读取到json中的值
break;
case \'en\':
var t = en[m];
break;
default:
var t = hk[m];
}
//如果所选语言的json中没有此内容就选取其他语言显示
if(t==undefined) t = cn[m];
if(t==undefined) t = en[m];
if(t==undefined) t = hk[m];
if(t==undefined) return true; //如果还是没有就跳出
//文字放置位置有(html,val等,可以自己添加)
switch(p){
case \'html\':
me.html(t);
break;
case \'val\':
case \'value\':
me.val(t);
break;
default:
me.html(t);
}
});
以上是html中的文字替换,但是写在js中的文字怎么办?
可以定义一个函数,来读取
function get_lan(m)
{
//获取文字
var lan = getCookie(\'lan\'); //语言版本
//选取语言文字
switch(lan){
case \'cn\':
var t = cn[m];
break;
case \'hk\':
var t = hk[m];
break;
default:
var t = en[m];
}
//如果所选语言的json中没有此内容就选取其他语言显示
if(t==undefined) t = cn[m];
if(t==undefined) t = en[m];
if(t==undefined) t = hk[m];
if(t==undefined) t = m; //如果还是没有就返回他的标识
return t;
}
那么在js中使用的文字就只要用此函数来读取就可以了
如
alert(\'姓名\');
改成
alert(get_lan(\'name\'));