jQuery实现的中英文切换功能示例
更新时间：2019年01月11日 15:00:27 作者：The_road_of_ordinary
这篇文章主要介绍了jQuery实现的中英文切换功能,结合实例形式分析了jQuery结合插件translate.js实现中英文翻译的相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的中英文切换功能。分享给大家供大家参考，具体如下：
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中英文切换</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/language.js"></script>
</head>
<body>
<button id="change">中英文切换</button>
<div style="text-align: center">
你好
</div>
</body>
<script type="text/javascript">
$("#change").click(function() {
translate();
})
</script>
</html>
2.language.js
$(function(){
// do something
var script=document.createElement("script");
script.type="text/javascript";
script.src="js/translate.js";
document.getElementsByTagName('head')[0].appendChild(script);
var value = sessionStorage.getItem("language");
document.onreadystatechange = function () {
if (document.readyState == 'complete') {
if(value==="1"){
Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
}
}
}
function onProgress(value) {
}
function onError(error) {
}
function onComplete() {
$("#WidgetFloaterPanels").hide();
}
function onRestoreOriginal() {
}
});
function translate(){
var value = sessionStorage.getItem("language");
if(value==="1"){
sessionStorage.setItem("language", "0");
}else{
sessionStorage.setItem("language", "1");
}
window.location.reload();//刷新当前页面.
}
3.translate.js是将http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**的源码下载下来的，并将里面
<1> J = "block", ib = "inline-block",都改成等于none
<2>s.style.color = q;s.style.backgroundColor = p两行注释
目的是去除翻译后出现的弹框和hover效果
最后：
附：完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
正好项目中准备使用thickbox，于是干脆抛弃prototype.js，看起jquery.js了。JQuery确实不错，体积比Prototype小了许多，而且使用起来更方便更灵活。有人说Prototype像JAVA，正统；而JQuery像Ruby，灵活，更趋于OOP。2009-10-10
jQuery插件ajaxFileUpload实现异步上传文件效果
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来我们来看下用AjaxFileUpload插件实现文件上传的方法，有需要的小伙伴可以参考下2015-04-04
本篇文章主要是对jQuery选择器进行了全面的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
本篇文章是对jquery中的div显示和隐藏特效demo进行了详细的分析介绍，需要的朋友可以参考下2013-07-07
jQuery Ajax 实现分页 kkpager插件实例代码
本文通过实例代码给大家讲解了jQuery Ajax 实现分页 kkpager插件功能，需要的的朋友参考下吧2017-08-08
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
这节介绍一个自己写的jQuery文本框字符限制插件，至于如何写插件，我这里就不多讲了，可以查看相关介绍，这里主要介绍下该插件的功能2012-02-02
本文仅供参考，如有不足或错误，请不吝赐教，这里以一个弹出层的jQuery插件制作实例为基础，进行插件制作的说明。2010-04-04
这篇文章主要介绍了jquery实现带二级菜单的导航示例,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jquery实现简单文字提示效果的方法,以完整实例形式分析了jQuery插件jquery-1.2.6.pack.js实现文字提示效果的相关技巧,并提供了jquery-1.2.6.pack.js的本站下载地址,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了从如何写JQuery插件，需要注意的事项，还有必须要做的步骤，看过这个文章相信你会明白如何写好一个JQuery插件2013-11-11
最新评论