3 Star 2 Fork 151

jason.fy / translate

forked from 鬼画符 / translate 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
v1.md 3.31 KB
一键复制 编辑 原始数据 按行查看 历史
鬼画符 提交于 2023-01-17 17:04 . update path

v1.x 版本使用说明

  • 当前为 v1.x版本的文档说明
  • 如果要查看 v2.x版本的说明,请查阅: README.md

体验-在网页上几秒增加多语言切换能力:

效果

  1. 随便打开一个网页
  2. 右键 - 审查元素
  3. 粘贴入以下代码:
    var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'https://res.zvo.cn/translate/inspector.js'; head.appendChild(script);
  4. Enter 回车键 , 执行
  5. 在当前网页的左上角,就出现了一个大大的切换语言,切换试试看。

在线体验

http://res.zvo.cn/translate/demo_v1.html

快速使用体验

在网页最末尾, </html> 之前,加入以下代码,一般在页面的最底部就出现了选择语言的 select 切换标签。 其实就这么简单:

<script src="//res.zvo.cn/translate/translate.js"></script>
<script> translate.execute();//进行翻译 </script>

更多扩展用法

指定切换语言的select选择框的位置

你想在你页面什么地方显示,就吧下面这个放到哪即可。

<div id="translate"></div>

主要是这个 id="translate" 切换语言的按钮会自动赋予这个id里面。当然你也不一定时非要是div的,也可以这样

<span id="translate"></span>

CSS美化切换语言按钮

可使用css来控制切换语言选择的显示位置及美观。如:

<style>
.translateSelectLanguage{
	position: absolute;
	top:100px;
	right:100px;
}
</style>

这就是控制切换语言的 <select> 标签

设定 select 切换语言,支持哪些语言可切换

<script>
	translate.selectLanguageTag.languages = 'zh-CN,zh-TW,en';  //注意要放到 translate.execute(); 上面
	translate.execute();
</script>

默认不设置此,则支持 简体中文、繁体中文、英语 三种。 可设置的语言包括:

de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,tr

设定是否自动出现 select 切换语言

<script>
	/*
	 * 是否显示 select选择语言的选择框,true显示; false不显示。默认为true
	 * 注意,这行要放到 translate.execute(); 上面
	 */
	translate.selectLanguageTag.show = false;
	translate.execute();
</script>

使用场景是,如果使用了:

<a href="javascript:translate.changeLanguage('en');">切换为英语</a>

这种切换方式,那么 select下拉选择的就用不到了,就可以用此方式来不显示。
当然你也可以使用css的方式来控制其不显示。比如:

<style>
#translate{
	display:none;
}
</style>

手动执行页面翻译

<script>
	translate.execute();
</script>

对于一些网页需要通过ajax请求来加载数据的情况,当加载完数据时,手动执行此方法,使刚加载的信息也进行翻译

js主动切换语言

比如点击某个链接显示英文界面

<a href="javascript:translate.changeLanguage('en');">切换为英语</a>
1
https://gitee.com/feiyit/translate.git
git@gitee.com:feiyit/translate.git
feiyit
translate
translate
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891