今日の人気記事

  1. アプリのようにスライドするレスポンシブメニュー「mmenu」
  2. 指定した要素を上下左右にスクロール「Marquee」
  3. 複数の画像をクロスフェードで切り替える「Image Rotator」
  4. select要素を検索できるように「Chosen」
  5. 同じ内容の入力フォームを追加・削除「Repeater」

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

スポンサーリンク

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

jQueryプラグイン「translate.js」

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

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

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

スポンサーリンク

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

「translate.js」のデモ

デモのソース(HTML + jQuery)

<!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>
スポンサーリンク

関連記事(一部広告含む)