今日の人気記事

まだデータがありません。

クリック操作でWebサイトを翻訳「translate.js」

当ページのリンクには広告が含まれています。

スポンサーリンク

クリック操作でWebサイトを翻訳するプラグイン「translate.js」を紹介します。

jQueryプラグイン「translate.js」

このプラグインを使えば、クリック一発でWebサイトを簡単に翻訳することができます。

ただし！自動翻訳ではなく、手動翻訳です。例えば「こんにちは」という単語を英語翻訳する場合は「こんにちは=Hello」をあらかじめjavascriptで定義しておく必要があります。

翻訳プラグインというか、テキスト切り替えプラグインですね。

スポンサーリンク

デモの「翻訳」ボタンをクリックしてみてください。

「translate.js」のデモ

デモのソース（HTML + jQuery）

ソースを表示
印刷SyntaxHighlighterについて
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="translate.jsのデモでーす。">
<title>translate.js - jQuery Plugin Demo</title>
</head>
<body>
<h1>translate.js のデモでーす。</h1>
 
<p class="trn" data-trn-key="hello">こんにちは</p>
<p class="trn" data-trn-key="thank">ありがとう</p>
 
<ul>
<li><a class="lang_selector trn" href="#" data-value="jp">日本語に翻訳</a></li>
<li><a class="lang_selector trn" href="#" data-value="en">英語に翻訳</a></li>
</ul>
 
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.translate.js"></script>
<script>
$(function() {
  var t = {
    hello: {
      jp: "こんにちは",
      en: "Hello"
    },
    thank: {
      jp: "ありがとう",
      en: "Thank you"
    }
  };
   
  var _t = $('body').translate({lang: "en", t: t});
  var str = _t.g("translate");
  console.log(str);
 
  $(".lang_selector").click(function(ev) {
    var lang = $(this).attr("data-value");
    _t.lang(lang);
 
    console.log(lang);
    ev.preventDefault();
  });
});
</script>
</body>
</html>

jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。

スポンサーリンク

関連記事（一部広告含む）