使用自定义标志图标实施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>

Answer 2

@mogelbrod代码并不总是有效,所以我有点破解它.

如果用户在谷歌帐户登录,谷歌将检测到它的语言,所以你将不能够期望的元素上触发事件,因为数据-lang属性将是不正确的自动翻译语言文本!

未登录Google帐户和美国/英国用户的用户将拥有此权限.

例如; 克罗地亚用户将拥有此权限.

在这种情况下,最好映射语言顺序.例如,从上面,那将是

0 - 英文

1 - 法语

2 - 德语

3 - 意大利语

HTML:

请注意数据放置属性(您可以更改元素顺序,但保留上面的放置).

<div class="translation-icons" style="visibility:hidden">
    <a href="#" class="eng" data-placement="0">eng icon</a>
    <a href="#" class="fra" data-placement="1">fra icon</a>
    <a href="#" class="ger" data-placement="2">ger icon</a>
    <a href="#" class="ita" data-placement="3">ita icon</a>
</div>

JS:我不得不改变查找选择器.需要注意的是,当用户的动产语言,有没有更多的"选择语言"在#google_translate_element div元素,所以我不得不处理这件事情.

在加载所有脚本(谷歌翻译)之前,最好不要显示图标.

$(window).load(function () {

    $('.translation-icons').css('visibility', 'visible');

        $('.translation-icons a').click(function(e) {
            e.preventDefault();
            var placement = $(this).data('placement');
            var lang_num = $('.translation-icons a').length;
            var $frame = $('.goog-te-menu-frame:first');

            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }

            var langs = $('.goog-te-menu-frame:first').contents().find('a span.text');

            if(langs.length != lang_num) placement = placement+1;

            langs.eq(placement).click();
            return false;
        });
});