javascript - 使用自定义标志图标实现 Google 翻译

Question

目前，我正在使用此处找到的简单 Google 翻译下拉菜单:
http://translate.google.com/translate_tools

我还希望能够单击我拥有的一些标志图标并触发由谷歌翻译小部件中基于文本的链接调用的相同 javascript 调用。

有人对如何实现这一点有想法吗？我不知道如何使点击标志启动与点击谷歌翻译文本链接相同的行为。

Answer 1

为这个问题找到解决方案很有趣!

<!-- Use CSS to replace link text with flag icons -->
<ul class="translation-links">
  <li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li>
  <li><a href="#" class="german" data-lang="German">German</a></li>
</ul>

<!-- Code provided by Google -->
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

<!-- Flag click handler -->
<script type="text/javascript">
    $('.translation-links a').click(function() {
      var lang = $(this).data('lang');
      var $frame = $('.goog-te-menu-frame:first');
      if (!$frame.size()) {
        alert("Error: Could not find Google translate frame.");
        return false;
      }
      $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();
      return false;
    });
</script>