注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

山林客

简单不一定幸福,但幸福其实可以很简单。

 
 
 

日志

 
 
关于我

2004年毕业于中山大学,毕业后专注于网站开发和网络工程技术。先后取得SCWCD、CCNP认证,对Asp/Java有丰富的开发经验,对网络工程也有较深的研究。真诚欢迎大家多多指教、多多指点、多多指正,共同分享IT道路和人生道路上的喜怒哀乐。

瑞志建站系统亮点1:中英文版本的无缝切换(无需刷新页面)  

2009-01-31 22:47:29|  分类: ASP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在开发瑞志企业建站系统的过程中,山林客(ah_bill)利用CSS和JavaScript,顺利实现了网站中英文的无缝切换。

看一下效果:

中文:

 实现中英文版本的无缝切换(无需刷新页面) - 瑞志.net - 山林客

当点击“English”链接的时候,整个界面的所有文字将转换为英文。

实现中英文版本的无缝切换(无需刷新页面) - 瑞志.net - 山林客

 

其实,所用到的并非什么新技术,只能算是一些使用技巧。下面我来详细介绍一下这个技巧。

我用一个asp来动态生成css

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%response.ContentType="text/css"%>
@charset "utf-8";
<%
language=request.QueryString("language")
 if language<>"" then   '如果我点击了按钮,则会传入一个language查询参数,这说明我要更改当前语言
response.cookies("language")=language
 else  '否则,将从Cookies中查询我所使用的语言
 language=request.Cookies("language")
 end if
if language="eng" then  '如果是英文
%>
.chn{  '这是中文,所有中文出现的地方都会加上这个标记
display:none;
}
.eng{ '这是英文,所有英文出现的地方都会加上这个标记
display:inline;
}
<%else%>
.chn{
display:inline;
}
.eng{
display:none;
}
<%
end if
%>

我们还要在每个页面中包含一条语句来初始化页面的语言:

if request.cookies("language")="" then response.cookies("language")="chn"   '默认为中文

 

中英文切换用到一个JavaScript

  <ul>
   <li><a href="#" onclick="setLanguage('chn');">中文版</a></li>
   <li><a href="#" onclick="setLanguage('eng');">English</a></li>
  </ul>

function setLanguage(language){
 document.getElementById("langcss").href="../style/style1.asp?language="+language;
}

当切换的时候,我们会更改当前页的css地址,在更改的同时也完成了Cookies的写入

<link id="langcss" type="text/css" href="../style/style1.asp" rel="stylesheet" rev="stylesheet"/>

然后,在文本出现的地方用上.chn和.eng即可

<th class="chn">请选择留言类型:</th>
<th class="eng">Please select the type:</th>
由于我们设置的.chn和.eng总有一个会隐藏,所以这里只会显示其中一个。

而我们经常看到的网页换肤,其实也就是使用类似的工作原理,当点击某种皮肤的时候就更改css样式文件,从而实现了无刷新的换肤。

是不是很简单啊,呵呵。

 

  评论这张
 
阅读(758)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018