Translater.JS巧用HTML注释翻译页面
发布在JSLite.io2016年3月28日view:1291前端开发JavaScript工具j's插件Romby
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

translater.js

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

Translater.js 官网

  • 支持 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('default');">English</a>
<a href="javascript:tran.setLang('jp');">日本語</a>
<a href="javascript:tran.setLang('cn');">中文</a> 

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

http://127.0.0.1:9005/test/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" />
评论
发表评论
暂无评论
WRITTEN BY
JSLite.io
前端开发工程师,JSLite.io求关注,求star。
TA的新浪微博
PUBLISHED IN
JSLite.io

官网:JSLite.io。JSLite 是一个 JavaScript 库,与 jQuery 有着类似的 API,通用库只有 5-10k,让 Web 开发更迅速,下载执行更快、量级更轻只针对先进浏览器(支持HTML5、CSS3)移动端浏览器编写的 JavaScript 库。与jQuery有着类似的api,模仿jQuery的语法规范,并不是100%的覆盖。如果你会用jQuery,那么你也会用JSLite。

推进前端开发标准对于攻城师来说,人人有责。

我的收藏