Jquery-translator calls Google translation examples and source code]

Last time I introduced a basic article about regular expressions, "Learning Regular Expressions easily". This article introduces jquery's Google translation plug-in jquery-translator, hoping to help you.

Preface

This article is about jquery's call to Google translator, translated from Google language translator using jquery. The translation can be reproduced, but the following information must be clearly indicated on the page:

Google language translator using jquery
Author: Wang Guofeng
Translation title: jquery calls Google translation examples]
Http://www.itivy.com/ivy/archive/2011/11/18/jquery-translator-usage.html.

Thank you for your cooperation!

Introduction

This article is about the most difficult work I have ever been involved in, but it has become the simplest thing. Thanks to jquery and jquery-translator.

Background

The requirement is simple: "add translation function for a successfully running ASP. NET application ". However, this application was not designed to support translation. It does not have the concept of localization/resource files at all. So I had to begin to change the existing basic data structure, including introducing localization concepts, resource files, and other related things, which would take a lot of time and effort, but jquery-translator has changed everything: it only takes me 12 hours to understand and can be successfully implemented in ASP.. NET application.

Code usage

I believe this article will be of great help to those who want to add translation functions to existing applications. This takes only a few minutes. Find the script library files you need in the attachment below this article, and then you can introduce them into your page to implement the translation function.

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

The code is easy to understand, and you can read it by scanning your eyes. InTranslatorscript. jsThe following code is used to load the script file:

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

The getscriptspath function is used to locate and load script files:

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;}

The loadtranslator () function is the core of the entire function. It mainly controls the DOM structure during the translation process and controls the changes in the user interface when selecting a language.

Function loadtranslator () {$. translate (function () {try {character ('character translate-bar'character .html ("");} catch (e) {} var selectedlanguage = $. cookie ('selectedlanguage'); // obtain the 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: '000000', height: '000000'}) ;}, complete: function () {$. unblockui ({CSS: {cursor: 'default'}) ;}}) ;}// load available languages into the selection box $. translate. UI ({tags: ["select", "option"], // a function that filters the available ages: // This can be an array of available ages/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 ages: Unknown deunknown: false }). change (function () {$. cookie ('selectedlanguage', $ (this ). val (), {path: '/'}); translateto ($ (this ). val (); Return true ;}). appendto ('# translate-bar ');});}

The source code in the attachment can help you translate existing pages into a specified language, which is very simple. For more information about jquery-translator, visit: http://code.google.com/p/jquery-translate/

Download Google Translate source code using jquery

Thank you for reading!

Just opened microblogging: http://weibo.com/sxwgf welcome to exchange