В ниже приведенном коде онлайн переводчик, нужно поставить кнопочку, которая бы меняла местами язык ввода и язык перевода без перезагрузки страницы.
Заранее спасибо.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Language Translation</title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<style type="text/css">
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
font-size: small;
margin: 15px;
}
form.query-box {
font-size: 15px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 4px;
margin-left : 0px;
width: 100%;
}
textarea.query-input {
padding-left : 2px;
margin-bottom : 4px;
width: 500px;
height:80px;
border: 1px solid #BCCDF0;
}
input.button {
margin-top : 4px;
}
div#main {
width: 500px;
}
div#results {
padding-top: 20px;
width: 500px;
}
div#results_title {
color: lightgray;
font-weight: bold;
}
div#results_body {
color: gray;
font-weight: bold;
font-size: 16px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="main">
<form class="query-box" onsubmit="return submitChange();">
<textarea name="source" class="query-input" id="source">Введите текст для перевода</textarea>
<div style="float:left">
<select name="src" id="src" tabindex=0 ><option value="en">английский</option><option value="uk">украинский</option><option value="ru" selected="selected">русский</option><option value="separator" disabled>—</option><option value="sq">албанский</option><option value="en">английский</option><option value="ar">арабский</option><option value="af">африкаанс</option><option value="be">белорусский</option><option value="bg">болгарский</option><option value="cy">валлийский</option><option value="hu">венгерский</option><option value="vi">вьетнамский</option><option value="gl">галисийский</option><option value="nl">голландский</option><option value="el">греческий</option><option value="da">датский</option><option value="iw">иврит</option><option value="yi">идиш</option><option value="id">индонезийский</option><option value="ga">ирландский</option><option value="is">исландский</option><option value="es">испанский</option><option value="it">итальянский</option><option value="ca">каталанский</option><option value="zh-CN">китайский</option><option value="ko">корейский</option><option value="ht">Креольский (Гаити) ALPHA</option><option value="lv">латышский</option><option value="lt">литовский</option><option value="mk">македонский</option><option value="ms">малайский</option><option value="mt">мальтийский</option><option value="de">немецкий</option><option value="no">норвежский</option><option value="fa">персидский</option><option value="pl">польский</option><option value="pt">португальский</option><option value="ro">румынский</option><option value="ru">русский</option><option value="sr">сербский</option><option value="sk">словацкий</option><option value="sl">словенский</option><option value="sw">суахили</option><option value="tl">тагальский</option><option value="th">тайский</option><option value="tr">турецкий</option><option value="uk">украинский</option><option value="fi">финский</option><option value="fr">французский</option><option value="hi">хинди</option><option value="hr">хорватский</option><option value="cs">чешский</option><option value="sv">шведский</option><option value="et">эстонский</option><option value="ja">японский</option></select>
>>
<select class=tllangdropdown name="dst" id="dst" tabindex=0 ><option value="ru">русский</option><option value="uk">украинский</option><option value="en" selected="selected">английский</option><option value="separator" disabled>—</option><option value="sq">албанский</option><option value="en">английский</option><option value="ar">арабский</option><option value="af">африкаанс</option><option value="be">белорусский</option><option value="bg">болгарский</option><option value="cy">валлийский</option><option value="hu">венгерский</option><option value="vi">вьетнамский</option><option value="gl">галисийский</option><option value="nl">голландский</option><option value="el">греческий</option><option value="da">датский</option><option value="iw">иврит</option><option value="yi">идиш</option><option value="id">индонезийский</option><option value="ga">ирландский</option><option value="is">исландский</option><option value="es">испанский</option><option value="it">итальянский</option><option value="ca">каталанский</option><option value="zh-TW">китайский (традиционный)</option><option value="zh-CN">китайский (упрощенный)</option><option value="ko">корейский</option><option value="ht">Креольский (Гаити) ALPHA</option><option value="lv">латышский</option><option value="lt">литовский</option><option value="mk">македонский</option><option value="ms">малайский</option><option value="mt">мальтийский</option><option value="de">немецкий</option><option value="no">норвежский</option><option value="fa">персидский</option><option value="pl">польский</option><option value="pt">португальский</option><option value="ro">румынский</option><option value="ru">русский</option><option value="sr">сербский</option><option value="sk">словацкий</option><option value="sl">словенский</option><option value="sw">суахили</option><option value="tl">тагальский</option><option value="th">тайский</option><option value="tr">турецкий</option><option value="uk">украинский</option><option value="fi">финский</option><option value="fr">французский</option><option value="hi">хинди</option><option value="hr">хорватский</option><option value="cs">чешский</option><option value="sv">шведский</option><option value="et">эстонский</option><option value="ja">японский</option></select></div>
<div style="float:right"><input class="button" type="submit" value="Перевести"/></div>
</form>
</div>
<div style="clear:both"></div>
<div id="results">
<div id="results_title">Перевод:</div>
<hr/>
<div id="results_body"></div>
<div id="branding"></div>
</div>
<script type="text/javascript">
google.load("language", "1");
google.setOnLoadCallback(init);
function init() {
var src = document.getElementById('src');
var dst = document.getElementById('dst');
var i=0;
for (l in google.language.Languages) {
var lng = l.toLowerCase();
var lngCode = google.language.Languages[l];
if (google.language.isTranslatable(lngCode)) {
src.options.add(new Option(lng, lngCode));
dst.options.add(new Option(lng, lngCode));
}
}
google.language.getBranding('branding', { type : 'vertical' });
submitChange();
}
function submitChange() {
var value = document.getElementById('source').value;
var src = document.getElementById('src').value;
var dest = document.getElementById('dst').value;
google.language.translate(value, src, dest, translateResult);
return false;
}
function translateResult(result) {
var resultBody = document.getElementById("results_body");
if (result.translation) {
var str = result.translation.replace('>', '>').replace('<', '<');
resultBody.innerHTML = str;
} else {
resultBody.innerHTML = '<span style="color:red">Error Translating</span>';
}
}
</script>
</body>
Сообщение сайта
Помогите с Ajax
karpiy
7 
Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
10.2.2010, 15:50;
Сообщений: 198
