使用 jQuery 的 Google 语言翻译器

• 下载源代码 - 67.2 KB

引言

本文全部关于我参与过的最艰难（最初）的工作之一的经验，但由于 jQuery 和使用 Google 语言翻译器的 jQuery-Translator，它变成了最容易的工作之一。

背景

需求用非常简单的话表述：“为成功运行的 ASP.NET 应用程序提供语言翻译能力”。但是，该应用程序从未设计成支持语言翻译。它没有任何本地化/资源文件和其他概念。通过构建一个需要我更改基本结构并包含本地化、资源文件和所有相关内容的概念来开始基础工作，这反过来意味着大量工作和业务时间，但 jQuery-Translator 改变了这一切：我只用了 12 个小时就理解并在 ASP.NET 应用程序中实现了它。

Using the Code

本文将对所有希望将语言翻译器集成到其现有应用程序/网站中的人有所帮助。现在这将是几分钟的工作。请在文章附带的源文件中找到所有必需的库和脚本。现在您只需要在应用程序的页面中包含对其中一个脚本的引用，就可以开始在页面中使用语言翻译器了。

<script src="Scripts/TranslatorScript.js" type="text/javascript"></script>

代码简单易懂，大部分可以通过浏览来理解。“TranslatorScript.js”是实现的关键。初始部分加载所有必需的脚本文件。

LoadScript(scriptPath + "jQuery-BlockUI.js");
LoadScript(scriptPath + "jquery.translate-1.4.7.min.js");
LoadScript(scriptPath + "jquery.cookie.js");

在此，LoadScript 是查找脚本文件位置并加载它们的函数。

function getScriptsPath() {
    var scripts = document.getElementsByTagName("script");
    var regex = /(.*\/)TranslatorScript/i;
    for (var i = 0; i < scripts.length; i++) {
        var currentScriptSrc = scripts[i].src;
        if (currentScriptSrc.match(regex))
            return currentScriptSrc.match(regex)[1];
    }
    return null;
}

loadTranslator() 函数是本文的中心，它完成了所有的魔术。此函数处理 DOM 结构化期间的语言翻译。此函数包含添加到页面中的 UI 代码，该代码提供用于语言选择的 UI 界面。

function loadTranslator() {

    $.translate(function() {

        try {
            $('#translate-bar').html("");
        }
        catch (e) {
        }

        var selectedLanguage = $.cookie('selectedLanguage');
        //get previously translated language

        if (selectedLanguage) {
            if(selectedLanguage != 'en')
                translateTo(selectedLanguage);
        }

        function translateTo(selectedLanguage) {
            $('body').translate('english', selectedLanguage, {
                not: '.jq-translate-ui',
                fromOriginal: true,
                start: function() {
                    $('#jq-translate-ui').val(selectedLanguage);
                    $.blockUI.defaults.applyPlatformOpacityRules = false;
                    $.blockUI(
                            {
                                message: 'Language Translation In Progress, Please Wait...',
                                css:
                                {
                                    border: 'none',
                                    padding: '10px',
                                    backgroundColor: '#000',
                                    '-webkit-border-radius': '9px',
                                    '-moz-border-radius': '9px',
                                    opacity: .9,
                                    color: '#fff'
                                },
                                overlayCSS: { backgroundColor: '#000', opacity: 0.6, 
                                  '-moz-opacity': '0.6', width: '100%', height: '100%' }
                            });
                },
                complete: function() { $.unblockUI({ css: { cursor: 'default'} }); }
            });
        }
    // Languages are loaded into the selection box    
        $.translate.ui({
            tags: ["select", "option"],
            //a function that filters the languages:
            //this can be an array of languages/language codes too
            filter: $.translate.isTranslatable,
            //a function that returns the text to display based on the language code:
            label: $.translate.toNativeLanguage ||
                function(langCode, lang) { return $.translate.capitalize(lang); },
            //whether to include the UNKNOWN:"" along with the languages:
            includeUnknown: false
            }).change(function() {
            $.cookie('selectedLanguage', $(this).val(), { path: '/' });
            translateTo($(this).val());
            return true;
        }).appendTo('#translate-bar');
    }); 
}

源文件包含脚本和其他相关文件以及图像，这些文件将有助于在现有页面内容之上构建一个层，并为语言翻译提供合适的 UI。这是一个非常简单和基本的实现。脚本文件处理页面内容的 DOM 结构。当页面加载并且页面的 DOM 结构准备就绪后，内容将通过 jQuery Translator 翻译成所需的语言。有关 jQuery-Translator 的更多信息，请访问 http://code.google.com/p/jquery-translate/。

关注点

本文将对所有希望以最少的努力和实现时间在其站点/应用程序中集成语言翻译器的人有所帮助。