♣︎ This is a use of HTML comments page translation solution. For a small amount of static pages, this solution is more simple. it has no dependents, Compression only (4KB)
Clone or download
Latest commit b5fb0d0 Sep 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist released v1.0.12 Sep 12, 2018
src image and input translater #9 Mar 11, 2017
test update example. Mar 11, 2017
.gitignore ignore .DS_Store Mar 10, 2017
.npmignore Add npm ignore configuration. Jul 23, 2016
README-zh.md Add an English document. Sep 12, 2018
README.md Update README.md Sep 12, 2018
package.json released v1.0.12 Sep 12, 2018
translater.js.gif update README Jul 23, 2016

README.md

translater.js

jaywcjlove/sb jaywcjlove/sb CDNJS version

♣︎ This is a use of HTML comments page translation solution. For a small amount of static pages, this solution is more simple. it has no dependents, Compression only (~2KB) Official document demo preview.

  • Support IMG``text switching
  • Support URL parameter switching language
  • Support local cache selection

translater.js 动画效果

Usage

$ npm install translater.js
import 'translater.js';

Or manually download and link translater.js in your HTML, It can also be downloaded via UNPKG:

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

The method of switching languages via hyperlinks.

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

You can set the language parameter passed through URL.

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

API

Adding text translation

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

Picture switch

<img 
  alt="image" 
  alt-cn="图片" 
  alt-jp="画像" 

  title="image2" 
  title-cn="图片2" 
  title-jp="画像2" 

  src="../img/imgae.jpg" 
  data-lang-cn="../img/imgae_cn.jpg" 
  data-lang-jp="../img/imgae_jp.jpg"
/>

Input

<input type="text" placeholder="like this?"  placeholder-cn="像这样?"  />
<input type="button" value="button" value-cn="按钮" value-jp="按钮日本"  />

getLang/setLang

Get or set the current languge.

<script type="text/javascript">
  var tran = new Translater();
  if (tran.getLang() === "default") tran.setLang('en');
</script>