谈到web项目页面部分的中英文切换功能,实现的方法有很多种,一是直接将所有的页面做一个中文版,一个英文版,通过按钮进行切换,这种做法的坏处就是维护起来很不方便,当页面部分需要修改时,两个版式的页面相应部分都需要修改;二是通过调用API插件的方式,比如谷歌、百度的插件,这种方法需要在联网的情况下使用,不太适合在局域网中发布的项目;第三种方法,做号中英文的对照表,通过JS方式引入。
本文中将讲到第三种方法js方法:
首先是test.jsp页面当然该页面需要引入jquery.js
<head>
<title>测试页面</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/language/language.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/language/tes.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/js/jquery.min.js"></script>
<script type="text/javascript">
/* 中英文切换功能添加 */
var lang_flag =0;
// alert(lang_flag+'1');
function changeflag0(){
$.ajax({
async: false,
success: function() {
lang_flag = 0;
}
});
alert(lang_flag+'2');
}
function changeflag1(){
$.ajax({
async: false,
success: function() {
lang_flag = 1;
}
});
alert(lang_flag+'3');
}
//alert(lang_flag+'4');
setInterval('reloadViewl()',500); //每1秒刷新一次页面下边显示的数据
function reloadViewl(){
fun();
}
</script>
</head>
<body>
<div ><input id="cc4" type="button" name="" value="中文" onClick="changeflag0()"/></div>
<div class="min9" ><input type="button" name="" value="English" onClick="changeflag1()"/></div>
</body>
下面将下tes.js的内容
function fun()
{
var C1=document.getElementsByTagName('title')[0];
C1.innerHTML= G1[lang_flag];
}
接着是中英文对照表language.js的内容了
var G1 = ['设备智能监控系统', ' Equipment Intelligent Monitoring System'];
到这里通过JS实现中英文切换的web页面功能就实现了