使用自定义标志图标实施Google翻译 [英] Implementing Google Translate with custom flag icons

问题描述

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

Currently, I'm using the simple Google Translate drop-down menu found here: http://translate.google.com/translate_tools

我还希望能够点击我的一些旗帜图标并触发相同的JavaScript调用这是由谷歌翻译小部件中基于文本的链接调用的。

I'd like to also be able to click on some flag icons I have and trigger the same javascript calls that are called by the text-based links in the google translate widget.

任何人都有关于如何实现这一点的想法？我无法弄清楚如何点击标志启动与点击谷歌翻译文本链接相同的行为。

Anyone have ideas on how to accomplish this? I can't figure out how to make clicking on the flags initiate the same behavior as clicking on the google translate text links.

推荐答案

找到这个问题的解决方案很有意思！

Had a lot of fun finding a solution for this question!

<!-- 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>

这篇关于使用自定义标志图标实施Google翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！