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

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

PHP中文网
Release: 2017-06-05 09:35:37
Original
2675 people have browsed it

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

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

支持 IMG 文本 切换

支持 URL 加载语言

支持本地缓存选择

作为模块安装

$ npm install translater.js
Copy after login

传统使用方法

<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>
Copy after login

切换语言方法通过超链接

<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>
Copy after login

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

http://.../test.html?lang=jp
Copy after login

文本翻译添加

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

图片切换

<img alt="images"  src="../img/imgae.jpg"  data-lang-cn="../img/imgae_cn.jpg"  data-lang-jp="../img/imgae_jp.jpg" />
Copy after login
Related labels:
source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template