JavaScript + Ajax 実践サンプル集 - jQueryのTextTranslateプラグインを使用してワンクリックで任意の言語に翻訳する

jQueryのTextTranslateプラグインを使用してワンクリックで任意の言語に翻訳する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryの TextTranslate プラグインを利用して任意の言語の文章を日本語などに翻訳することができます。サンプルが表示されたらパラグラフの先頭に表示されている「Translate this]のアイコンをクリックします。ポップアップが表示されたら、ドロップダウンリストから翻訳したい言語を選択します。たとえば、日本語に翻訳するときは「Japanese」を選択します。パラグラフ１と２は英語、パラグラフ３はデンマーク語で記述されています。

このサンプルを編集して試してみる

翻訳は、Goolgeの翻訳APIを利用しています。 ※原文が日本語のとき正常に翻訳されないようです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Translation Plugin - jTextTranslate</title>
  <link href="jQuery/textTranslate/css/style.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/textTranslate/demo.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("language", "1");</script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="jQuery/textTranslate/jquery.TextTranslate.js" type="text/javascript"></script>
  <script type="text/javascript">

$(function () {
      $("#text1").translate();      
            
      $("#text2").translate();

$("#text3").translate({
        original: 'de',
        notfound: 'Keine Übersetzung gefunden',
        title: 'Übersetzung',
        firstOptionText: 'Wählen Sie ihre Sprache:'
      });

});

</script>
</head>
<body>

<div class="content">
    <div class="demo">
      <h1>Paragraph 1</h1>
      <p id="text1">
        The Greeks believed that the mental qualifications of their gods were of a much
        higher order than those of men, but nevertheless, as we shall see, they were not
        considered to be exempt from human passions, and we frequently behold them actuated
        by revenge, deceit, and jealousy. They, however, always punish the evil-doer, and
        visit with dire calamities any impious mortal who dares to neglect their worship
        or despise their rites.
      </p>
    </div>
    <div class="demo">
      <h1>Paragraph 2</h1>
      <p id="text2">
        In the study of Grecian mythology we meet with some curious, and what may at
        first sight appear unaccountable notions. Thus we hear of terrible giants
        hurling rocks, upheaving mountains, and raising <a href="http://en.wikipedia.org/wiki/Earthquake">earthquakes</a> which engulf whole armies;
        these ideas, however, may be accounted for by the awful convulsions of nature, which
        were in operation in pre-historic times.
        Again, the daily recurring phenomena, which to us, who know them to be the
        result of certain well-ascertained
        laws of nature, are so familiar as to excite no remark, were, to the early
        Greeks, matter of grave speculation, and not unfrequently of alarm. 
      </p>
    </div>
    <div class="demo">
      <h1>Paragraph 3</h1>
      <p id="text3">
        Die verschiedenen Völker der Griechen definierten die Zugehörigkeit zu den Hellenen
        über die verschiedenen Varianten der griechischen Sprache und über den olympischen
        Kult in der Religion. Religiöse Feste wie die Mysterien von Eleusis, zu denen sich
        Einwohner aller griechischen Völker versammelten, bildeten eine Einheit stiftende,
        quasi nationale Manifestation in der politisch zersplitterten und oft durch gegenseitige
        Konkurrenz oder Krieg geprägten griechischen Welt.</p>
    </div>
    <div style="clear: both"></div>
  </div>
  
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryのTextTranslateプラグインを使用してワンクリックで任意の言語に翻訳する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryのTextTranslateプラグインを使用してワンクリックで任意の言語に翻訳する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!