jQuery translate + bascule, comment lier les deux?

Je travaille actuellement sur un script jQuery qui traduira le texte du site dans une langue étrangère. J'utilise l'API Google Traduction pour cela. Je voudrais que la page inclue un lien qui indique En Espanol et quand l'utilisateur clique sur En Espanol, le corps de la page est traduit en espagnol à l'exception de ce lien qui dit En anglais - quand l'utilisateur clique sur ce lien, le corps de la page reviendra à l'anglais. Le code suivant est ce que j'ai jusqu'ici. Toute aide est la bienvenue. Je vous remercie.jQuery translate + bascule, comment lier les deux?

JQuery:

$(document).ready(function(){ 
     // hide all blocks that have class hide 
     //$('.hide').hide(); 
     // toggle link1 with container1 
     // using chaining for performance and ease 
     // changing html of link 
     $('.showhide').toggle(function(){ 
      //$(this).parent().next().slideDown('slow').removeClass('hide').preventDefault; 
      $(this).html('English'); 
      },function(){ 
      //$(this).parent().next().slideUp('slow').addClass('hide').preventDefault; 
      $(this).html('En Espanol'); 
     }) 

    });

HTML:

<p><a id="link1" class="showhide" href="#container1" onclick="translate('es');"> 
En Espanol</a></p> 
<!--Calls Google Translate via div --> 
<div id="translation"></div> 
<div id="article"> 
<p>Google Inc is set to introduce on Tuesday a new Web browser designed to handle text 
and graphics.</p> 
</div>

Source

2009-08-20 user160347

Quelle est la question? Quand ou comment basculer? Appelez l'API de Google? –

Désolé, c'est une question à deux volets. Comment basculer le lien et avoir ce lien appeler l'API Google pour traduire le texte. – user160347

Cela devrait vous aider à démarrer. Cependant, il y a quelques problèmes que vous devrez résoudre. Par exemple, cela ne va pas forcément traduire tous le texte sur la page, seulement les éléments <p> à l'intérieur <div id="article">. Vous pouvez remplacer le sélecteur par votre propre sélecteur avancé qui couvre tout ce dont vous avez besoin pour couvrir.

Quelques choses que j'ai changé à partir de votre code d'origine:

Vous n'avez pas besoin d'un événement onclick dans le lien, nous pouvons faire ce que nous devons facilement à l'intérieur de la fonction toggle dans jQuery.
La section <div id="translation"> est inutile (je suppose que vous venez de copier et coller de l'API).
Assurez-vous d'accéder au lien par son identifiant, sauf si vous avez besoin de plusieurs liens qui traduisent la page entière (ce qui ne semble pas être le cas).

<html> 
<head> 
<title>Google Translate Example</title> 
    <script type="text/javascript" src="includes/js/jquery.js"></script> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    google.load("language", "1"); 

    $(document).ready(function(){ 
     $('#link1').toggle(function(){ 
      $('#article p').each(function(){ 
       var element = $(this); 
       google.language.translate($(this).text(), 'en', 'es', function(result){ 
        $(element).text(result.translation); 
       }); 
      }); 
      $(this).html('English'); 
     }, function(){ 
      $('#article p').each(function(){ 
       var element = $(this); 
       google.language.translate($(this).text(), 'es', 'en', function(result){ 
        $(element).text(result.translation); 
       }); 
      }); 
      $(this).html('En Espanol'); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <p><a id="link1" href="#container1">En Espanol</a></p> 
    <div id="article"> 
     <p>Google Inc is set to introduce on Tuesday a new Web browser designed to handle text 
    and graphics.</p> 
    </div> 
</body> 
</html>

Pour plus d'informations, consultez le Google AJAX Language API.

Source

2009-08-20 22:25:50

Merci beaucoup, joshleitzel. – user160347

jQuery translate + bascule, comment lier les deux?

Répondre

Questions connexes