在web应用开发起初,用户很希望看到将来系统的实际模型,一般我们都采用静态的html来建立demo,让用户有一个实际的感观。而我们的客户是多样化的,有可能有老外,如何让我们的demo显示不同的文字,而不需要修改每一张页面。有兴趣的朋友,将下列代码(1张静态页面、3个js文件)拷下来一看就知道了。

1、multi_lang.htm


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>html国际化</title>
<script language="JavaScript" src="init.js"></script>
<!--script language="JavaScript" src="en.js"></script-->
<script language="JavaScript" src="zh-cn.js"></script>

<body onload="initbody()">
<table border="1">
  <tr>
    <td width="149" id='name1'>姓名:</td>
    <td width="149">&nbsp;</td>
  </tr>
  <tr>
    <td id='age1'>年龄:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td id='gender1'>性别:</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

2、init.js

function initbody(){
 var controller= new LanguageController();
 
 name1.innerHTML=controller.language.titles["Name"];
 age1.innerHTML=controller.language.titles["Age"];
 gender1.innerHTML=controller.language.titles["Gender"];
}

3、en.js

function LanguageController() {
 this.language = {
    
  lang: "zh-cn",
  
  buttons: {
   "ok":           "ok",
   "cancel":       "cancel"
  },
  
  titles: {
   "Name":         "name",
   "Age":          "age",
   "Gender":       "gender"
  }
 };
}

4、zh-cn.js

function LanguageController() {
 this.language = {
    
  lang: "zh-cn",
  
  buttons: {
   "ok":           "确定",
   "cancel":       "取消"
  },
  
  titles: {
   "Name":         "姓名",
   "Age":          "年龄",
   "Gender":       "性别"
  }
 };
}

posted on 2006-03-08 21:24 野草 阅读(3534) 评论(2)  编辑  收藏 所属分类: html/js

评论:
# re: html的“国际化”[未登录] 2012-09-04 10:49 | tom
用i8n 很好, 简单明了。可以从csdn上下载。  回复  更多评论
  
# re: html的“国际化” 2013-04-15 14:58 | dfadsf
adsfasdf  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: