Git Product home page Git Product logo

translater.js's Introduction

translater.js

jaywcjlove/sb jaywcjlove/sb CDNJS version

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

  • 支持 IMG 文本 切换
  • 支持 URL 加载语言
  • 支持本地缓存选择

translater.js 动画效果

作为模块安装

$ 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

Text

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

Image

<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

获取或设置当前语言。

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

translater.js's People

Contributors

jaywcjlove avatar extend1994 avatar poornerd avatar

Watchers

zhou avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.