使用jQuery集成Google翻译

浏览数：132 / 时间：2015年06月09日

利用jQuery，轻松将google翻译集成到你的web应用中。

1. [代码][JavaScript]代码
?
1<script src="Scripts/TranslatorScript.js" type="text/javascript"></script>
?
2 [代码]LoadScript,设置路径
?
?1LoadScript(scriptPath + "jQuery-BlockUI.js");
2LoadScript(scriptPath + "jquery.translate-1.4.7.min.js");
3LoadScript(scriptPath + "jquery.cookie.js");

?3. [代码][JavaScript]代码
01function getScriptsPath() {
02 var scripts = document.getElementsByTagName("script");
03 var regex = /(.*\/)TranslatorScript/i;
04 for (var i = 0; i < scripts.length; i++) {
05 var currentScriptSrc = scripts[i].src;
06 if (currentScriptSrc.match(regex))
07 return currentScriptSrc.match(regex)[1];
08 }
09
10 return null;
11}
4. 代码]loadTranslator

01function loadTranslator() {
02
03 $.translate(function() {
04
05 try {
06 $(‘#translate-bar‘).html("");
07 }
08 catch (e) {
09 }
10
11 var selectedLanguage = $.cookie(‘selectedLanguage‘); //get previously translated language
12
13 if (selectedLanguage) {
14 if(selectedLanguage != ‘en‘)
15 translateTo(selectedLanguage);
16 }
17
18 function translateTo(selectedLanguage) {
19 $(‘body‘).translate(‘english‘, selectedLanguage, {
20 not: ‘.jq-translate-ui‘,
21 fromOriginal: true,
22 start: function() {
23 $(‘#jq-translate-ui‘).val(selectedLanguage);
24 $.blockUI.defaults.applyPlatformOpacityRules = false;
25 $.blockUI(
26 {
27 message: ‘Language Translation In Progress, Please Wait...‘,
28 css:
29 {
30 border: ‘none‘,
31 padding: ‘10px‘,
32 backgroundColor: ‘#000‘,
33 ‘-webkit-border-radius‘: ‘9px‘,
34 ‘-moz-border-radius‘: ‘9px‘,
35 opacity: .9,
36 color: ‘#fff‘
37 },
38 overlayCSS: { backgroundColor: ‘#000‘, opacity: 0.6, ‘-moz-opacity‘: ‘0.6‘, width: ‘100%‘, height: ‘100%‘ }
39 });
40 },
41 complete: function() { $.unblockUI({ css: { cursor: ‘default‘} }); }
42 });
43 }
44 // Languages are loaded into the selection box
45 $.translate.ui({css3特效
46 tags: ["select", "option"],
47 //a function that filters the languages:
48 filter: $.translate.isTranslatable, //this can be an array of languages/language codes too
49 //a function that returns the text to display based on the language code:
50 label: $.translate.toNativeLanguage ||http://www.huiyi8.com/css3/?
51 function(langCode, lang) { return $.translate.capitalize(lang); },
52 //whether to include the UNKNOWN:"" along with the languages:
53 includeUnknown: false
54 }).change(function() {
55 $.cookie(‘selectedLanguage‘, $(this).val(), { path: ‘/‘ });
56 translateTo($(this).val());
57 return true;
58 }).appendTo(‘#translate-bar‘);
59 });
60}