master

分支 (1)

管理

管理

master

translate
/
demo.html

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="keyword" content="国际化,自动化翻译"/>
  <meta name="description" content="网页自动翻译，页面无需另行改造，加入两行 js 即可让你的网页快速具备多国语言切换能力！"/>
</head>
<body>
<script src="./translate.js"></script>
<script src="https://res.zvo.cn/msg/msg.js"></script>

<div class="title">简介:</div>
<div>国际化，网页自动翻译，同谷歌浏览器自动翻译的效果，适用于网站。</div>
<div>当前为 v2 版本，v1 版本参见：<a href="demo_v1.html" target="_black">demo_v1.html</a></div>

<!-- ajax示例 -->
<div id="ajax">我这里是通过ajax请求获取的内容在此显示。ajax翻译的内容也会实时被翻译，放心，拉不下的</div>
<script>
var ajax_num = 0;
setInterval(function(){
	document.getElementById('ajax').innerHTML = '我是结果，当前第 ' + ajax_num++ +' 次载入';
},1000);
</script>
<!-- ajax示例 end -->

<hr/>
<div class="title">hello, 使用方式:</div>
<h4>1. 引入 js 库</h4>
<div>
	<pre>
&lt;script src="https://res.zvo.cn/translate/translate.js"&gt;&lt;/script&gt;
	</pre>
</div>
<h4>2. 在页面最底部加入js代码</h4>
<div>
	<pre>
//translate.ignore.tag.push('span'); //翻译时追加上自己想指定忽略的tag标签，凡是在这里面的，都不进行翻译。
//translate.ignore.class.push('test');	//翻译时指定忽略的class name，凡是class name 在这里面的，都不进行翻译。如果不设置默认只有 ignore 这一个
//translate.setAutoDiscriminateLocalLanguage();	//设置用户第一次用时，自动识别其所在国家的语种进行切换
translate.setUseVersion2(); //设置使用v2.x 版本
translate.execute(); //执行翻译初始化操作，显示出select语言选择
	</pre>
	<p>注意，要在页面最底部加。如果你在页面顶部加，那下面的是不会被翻译的</p>
	<p>如果你网页中有ajax请求更新了数据，要对其更新的数据进行翻译时，可直接执行 <code style="padding-left:10px; padding-right:10px;">translate.execute();</code> 进行翻译</p>
</div>
<hr/>


<div class="title">语言切换示例：</div>
<div>
	按钮切换语言:
	<a class="ignore" href="javascript:translate.changeLanguage('english');">English</a> |
	<a class="ignore" href="javascript:translate.changeLanguage('chinese_simplified');">简体中文</a> |
	<a class="ignore" href="javascript:translate.changeLanguage('chinese_traditional');">繁體中文</a>
</div>

<div id="translate">
	select选择框切换语言:
</div>

<div style="position:absolute; bottom:10px; text-align:center; width: 100%;font-size: 18px;">
	开源地址及使用方式参考： <a href="https://gitee.com/mail_osc/translate" class="ignore">https://gitee.com/mail_osc/translate</a>
</div>

<script>
//translate.ignore.tag.push('img'); //翻译时追加上自己想指定忽略的tag标签，凡是在这里面的，都不进行翻译。
//translate.ignore.class.push('test');	//翻译时指定忽略的class name，凡是class name 在这里面的，都不进行翻译。如果不设置默认只有 ignore 这一个
//var documents = [];
//documents.push(document.getElementById('ajax'));
//documents.push(document.getElementById('test2'));
//documents.push(document.getElementById('test3'));
//translate.setDocuments(documents); //指定要翻译的元素的集合,可传入一个或多个元素。如果不设置，默认翻译整个网页
//translate.setAutoDiscriminateLocalLanguage();	//设置用户第一次用时，自动识别其所在国家的语种进行切换
translate.setUseVersion2(); //设置使用v2.x 版本
translate.listener.start();	//开启html页面变化的监控，对变化部分会进行自动翻译。注意，这里变化区域，是指使用 translate.setDocuments(...) 设置的区域。如果未设置，那么为监控整个网页的变化
translate.execute(); //执行翻译初始化操作，显示出select语言选择
</script>


<style>
.title{
	font-size:24px;
	padding-top:15px;
	padding-bottom:10px;
}
</style>
</body>
</html>