jQueryTranslator调用Google翻译实例及源码【译】

上次介绍了一篇关于正则表达式的基础文章《轻松学习正则表达式》。这次介绍一个jquery的Google翻译插件jQuery-Translator，希望对大家有所帮助。

写在最前面

这次的文章是关于jQuery调用Google Translator的，译自Google Language Translator Using jQuery。译文允许转载，但请在页面明显处标明以下信息：

英文原文：Google Language Translator Using jQuery
译文作者：王国峰
译文标题：jQuery调用Google翻译实例【译】
译文链接：http://www.itivy.com/ivy/archive/2011/11/18/jquery-translator-usage.html

谢谢合作！

简介

这篇文章是关于我最初参与过的最难工作的经历，但后来它却变成了一件最简单的事情，感谢jQuery和jQuery-Translator。

本文背景

需求很简单：“为正在成功运行的ASP.NET应用添加翻译功能”。但是这个应用以前设计的时候根本就没考虑过支持翻译的功能。它压根就没有本地化 /资源文件的概念。于是我就得开始改变现有的基本数据结构包括引入本地化概念，资源文件和其他相关的东西，这些都会花掉很多的时间和精力，但是 jQuery-Translator改变了这一切：它仅仅让我花12个小时去读懂和理解并且能够成功地实施在ASP.NET应用程序中。

代码的使用方法

我相信本文对那些想在现有应用中添加翻译功能的朋友会有很大帮助。这将仅花费短短几分钟时间。请先在本文后面的附件中找到需要用到的脚本库文件，然后你就可以将它们引入你的页面中来实现翻译功能了。

<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");

getScriptsPath函数用来找到脚本文件的位置并加载它们：

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结构的控制，并在选择语言的时候控制用户界面的变化。

function loadTranslator() {
 
    $.translate(function() {
 
        try {
            $('#translate-bar').html("");
        }
        catch (e) {
        }
 
        var selectedLanguage = $.cookie('selectedLanguage');
        //获取上一次已经翻译好的语言
 
        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',  '100%', height: '100%' }
                            });
                },
                complete: function() { $.unblockUI({ css: { cursor: 'default'} }); }
            });
        }
    // 将可用的语言加载到选择框里    
        $.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');
    }); 
}

附件中的源代码可以很好地帮助你将现有的页面翻译成指定的语言，非常简单。更多有关jQuery-Translator的信息可以访问： http://code.google.com/p/jquery-translate/

jQuery实现Google翻译源码下载

谢谢阅读！

刚开的微博：http://weibo.com/sxwgf   欢迎交流