Home >Web Front-end >HTML Tutorial >分享一个Translater.JS巧用HTML注释翻译页面实例

分享一个Translater.JS巧用HTML注释翻译页面实例

PHP中文网
PHP中文网Original
2017-06-05 09:35:372683browse

关注 JSDigs  偶尔给你来点干的。

这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面,这种解决方案显得更简单。它没有依赖,压缩只有只有(~2kb)。

支持 IMG 文本 切换

支持 URL 加载语言

支持本地缓存选择

作为模块安装

$ npm install translater.js

传统使用方法

<div>     这里是中文        <!--{jp}ここは日本語です-->     <!--{en}Here is English--></div><script src="../dist/translater.min.js" type="text/javascript"></script><script type="text/javascript">var tran = new Translater({  lang:"jp"});</script>

切换语言方法通过超链接

<a href="javascript:tran.setLang(&#39;default&#39;);">English</a><a href="javascript:tran.setLang(&#39;jp&#39;);">日本語</a><a href="javascript:tran.setLang(&#39;cn&#39;);">中文</a>

可以通过URL穿参数设置语言

http://.../test.html?lang=jp

文本翻译添加

<div>     这里是中文        <!--{jp}ここは日本語です-->     <!--{en}Here is English--></div>

图片切换

<img alt="images"  src="../img/imgae.jpg"  data-lang-cn="../img/imgae_cn.jpg"  data-lang-jp="../img/imgae_jp.jpg" />
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn