在当今全球化的互联网时代，网站和应用程序的多语言支持变得越来越重要。本文将介绍如何在一个已经成功运行的ASP.NET应用程序中，通过使用jQuery和jQuery-Translator插件，快速实现语言翻译功能。
最初，这个ASP.NET应用程序并没有设计成支持语言翻译。它没有考虑到本地化、资源文件等概念。为了实现语言翻译功能，需要对应用程序的基本结构进行更改，包括引入本地化、资源文件等概念。这无疑意味着大量的工作和时间投入。然而，jQuery-Translator的出现改变了这一切，它让在12小时内就理解并实现了这一功能。
本文将对那些希望在现有应用程序/网站中集成语言翻译器的开发者提供帮助。现在，这将是一项只需几分钟的工作。
<script src="Scripts/TranslatorScript.js" type="text/javascript"></script>
代码简单易懂，通过阅读代码，就能了解大部分实现。"TranslatorScript.js"文件是实现的关键。初始部分负责加载所有必需的脚本文件。
public void LoadScript(string scriptPath)
{
// 加载jQuery-BlockUI.js
LoadScript(scriptPath + "jQuery-BlockUI.js");
// 加载jquery.translate-1.4.7.min.js
LoadScript(scriptPath + "jquery.translate-1.4.7.min.js");
// 加载jquery.cookie.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结构化过程中处理语言翻译。这个函数包含了添加到页面的UI代码，提供了语言选择的UI界面。
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', width: '100%', height: '100%' }
});
},
complete: function() { $.unblockUI({ css: { cursor: 'default' } }); }
});
}
// 将语言加载到选择框
$.translate.ui({
tags: ["select", "option"],
filter: $.translate.isTranslatable,
label: $.translate.toNativeLanguage || function(langCode, lang) {
return $.translate.capitalize(lang);
},
includeUnknown: false
}).change(function() {
$.cookie('selectedLanguage', $(this).val(), { path: '/' });
translateTo($(this).val());
return true;
}).appendTo('#translate-bar');
});
}
源文件包括脚本和其他相关文件，以及用于构建页面内容之上的层并提供适当UI的图像。这是一个非常简单和基本的实现。脚本文件在页面内容的DOM结构上工作。
当页面加载并准备好DOM结构后，内容将通过jQuery翻译器翻译成所需的语言。