How to Translate your Site in Runtime using Jquery This is very interesting question. I have read several articles for this question, and most articles tell about ways where we need refresh page to apply another localization. Yes, this is possible of course, but not too user friendly. Just imagine that your website will able to switch language like desctop applications, great, isn`t it? So, that this still possible using ordinary javascript. I will using jQuery to better comfort.
如何在运行时使用Jquery转换您的网站这是一个非常有趣的问题。 我已经阅读了有关此问题的几篇文章，并且大多数文章都讲述了我们需要刷新页面以应用另一种本地化的方式。 是的，这当然是可能的，但对用户不太友好。 试想一下，您的网站将能够切换桌面应用程序之类的语言，很好，不是吗？ 因此，使用普通的javascript仍然可行。 我将使用jQuery来提高舒适度。
Here are samples and downloadable package:
以下是示例和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the source files and lets start coding !
好的，下载源文件并开始编码！
步骤1. XHTML (Step 1. XHTML)
Here are our main HTML file:
这是我们的主要HTML文件：
index.html (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>How to Translate your Site in Runtime using Jquery - demo</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="example">
<h3><a href="#">How to Translate your Site in Runtime using Jquery - demo</a></h3>
<div id="content">
<div class="lang_switcher">
<button id="en" class="lang">EN</button>
<button id="ru" class="lang">RU</button>
</div>
<div style="clear:both;"></div>
<!-- nav menu start -->
<ul id="nav">
<li><a href="#nogo" key="home" class="tr">Home</a></li>
<li><a href="#nogo" key="peoples" class="tr">Peoples >></a>
<ul>
<li><a href="#nogo" key="all_list" class="tr">All list</a></li>
<li><a href="#nogo" key="online" class="tr">Online</a></li>
</ul>
</li>
<li><a href="#nogo" key="articles" class="tr">Articles >></a>
<ul>
<li><a href="#nogo" key="js" class="tr">JavaScript</a></li>
<li><a href="#nogo" key="php" class="tr">PHP</a></li>
<li><a href="#nogo" key="html" class="tr">HTML</a></li>
<li><a href="#nogo" key="css" class="tr">CSS</a></li>
</ul>
</li>
<li><a href="#nogo" key="contact_us" class="tr">Contact us</a></li>
</ul>
<!-- nav menu end -->
<div style="clear:both;"></div>
<h2 key="welcome" class="tr">Welcome guests</h2>
<hr />
<div>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>How to Translate your Site in Runtime using Jquery - demo</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="example">
<h3><a href="#">How to Translate your Site in Runtime using Jquery - demo</a></h3>
<div id="content">
<div class="lang_switcher">
<button id="en" class="lang">EN</button>
<button id="ru" class="lang">RU</button>
</div>
<div style="clear:both;"></div>
<!-- nav menu start -->
<ul id="nav">
<li><a href="#nogo" key="home" class="tr">Home</a></li>
<li><a href="#nogo" key="peoples" class="tr">Peoples >></a>
<ul>
<li><a href="#nogo" key="all_list" class="tr">All list</a></li>
<li><a href="#nogo" key="online" class="tr">Online</a></li>
</ul>
</li>
<li><a href="#nogo" key="articles" class="tr">Articles >></a>
<ul>
<li><a href="#nogo" key="js" class="tr">JavaScript</a></li>
<li><a href="#nogo" key="php" class="tr">PHP</a></li>
<li><a href="#nogo" key="html" class="tr">HTML</a></li>
<li><a href="#nogo" key="css" class="tr">CSS</a></li>
</ul>
</li>
<li><a href="#nogo" key="contact_us" class="tr">Contact us</a></li>
</ul>
<!-- nav menu end -->
<div style="clear:both;"></div>
<h2 key="welcome" class="tr">Welcome guests</h2>
<hr />
<div>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
</div>
</div>
</body>
</html>
As you know, for localization we should use keys and values (translated strings to different languages). As you noticed, I just store key name inside required element, plus mark, that this element translatable. Here are sample: <h2 key="welcome" class="tr"> – mean that I using key ‘welcome’ for following translation.
如您所知，对于本地化，我们应该使用键和值(将字符串翻译成不同的语言)。 如您所见，我只是将键名存储在必需元素内，并加上标记，表明该元素可翻译。 这里是示例：<h2 key =“ welcome” class =“ tr”> –表示我使用密钥'welcome'进行后续翻译。
步骤2. CSS (Step 2. CSS)
Here are used CSS file.
这是用过CSS文件。
css / main.css (css/main.css)
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;height:500px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
.lang_switcher{float:right;overflow:hidden;}
/* nav menu styles */
#nav,#nav ul{list-style:none;font:10px verdana, sans-serif;border:1px solid #000;background:#fff;position:relative;z-index:200;border-color:#eca #b97 #a86 #edb;border-width:1px 2px 2px 1px;margin:0;padding:0 0 5px}
#nav{height:25px;padding:0}
#nav table{border-collapse:collapse}
#nav li{float:left;padding:0 20px 0 10px}
#nav li li{float:none}
#nav li a li{float:left}
#nav li a{display:block;float:left;color:#888;height:25px;padding-right:5px;line-height:25px;text-decoration:none;white-space:nowrap}
#nav li li a{height:20px;line-height:20px;float:none}
#nav li:hover{position:relative;z-index:300;background:#fff}
#nav a:hover{position:relative;z-index:300;text-decoration:underline;color:#b75}
#nav :hover ul{left:0;top:22px}
#nav a:hover ul{left:-10px}
#nav li:hover li:hover > ul{left:-15px;margin-left:100%;top:-1px}
#nav li:hover > ul ul{position:absolute;left:-9999px;top:-9999px;width:auto}
#nav li:hover > a{text-decoration:underline;color:#b75}
#nav a:hover a:hover ul,#nav a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover a:hover ul{left:100%;top:-1px}
#nav ul,#nav a:hover ul ul,#nav a:hover a:hover ul ul,#nav a:hover a:hover a:hover ul ul,#nav a:hover a:hover a:hover a:hover ul ul{position:absolute;left:-9999px;top:-9999px}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;height:500px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
.lang_switcher{float:right;overflow:hidden;}
/* nav menu styles */
#nav,#nav ul{list-style:none;font:10px verdana, sans-serif;border:1px solid #000;background:#fff;position:relative;z-index:200;border-color:#eca #b97 #a86 #edb;border-width:1px 2px 2px 1px;margin:0;padding:0 0 5px}
#nav{height:25px;padding:0}
#nav table{border-collapse:collapse}
#nav li{float:left;padding:0 20px 0 10px}
#nav li li{float:none}
#nav li a li{float:left}
#nav li a{display:block;float:left;color:#888;height:25px;padding-right:5px;line-height:25px;text-decoration:none;white-space:nowrap}
#nav li li a{height:20px;line-height:20px;float:none}
#nav li:hover{position:relative;z-index:300;background:#fff}
#nav a:hover{position:relative;z-index:300;text-decoration:underline;color:#b75}
#nav :hover ul{left:0;top:22px}
#nav a:hover ul{left:-10px}
#nav li:hover li:hover > ul{left:-15px;margin-left:100%;top:-1px}
#nav li:hover > ul ul{position:absolute;left:-9999px;top:-9999px;width:auto}
#nav li:hover > a{text-decoration:underline;color:#b75}
#nav a:hover a:hover ul,#nav a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover a:hover ul{left:100%;top:-1px}
#nav ul,#nav a:hover ul ul,#nav a:hover a:hover ul ul,#nav a:hover a:hover a:hover ul ul,#nav a:hover a:hover a:hover a:hover ul ul{position:absolute;left:-9999px;top:-9999px}
步骤3. JS (Step 3. JS)
Here are used JS files.
这是使用过的JS文件。
js / jquery.min.js和js / main.js (js/jquery.min.js and js/main.js)
First file – just jQuery library (available in package), source of second file here:
第一个文件–只是jQuery库(在软件包中提供)，第二个文件的来源在这里：
// preparing language file
var aLangKeys=new Array();
aLangKeys['en']=new Array();
aLangKeys['ru']=new Array();
aLangKeys['en']['home']='Home';
aLangKeys['en']['peoples']='Peoples >>';
aLangKeys['en']['all_list']='All list';
aLangKeys['en']['online']='Online';
aLangKeys['en']['articles']='Articles >>';
aLangKeys['en']['js']='JavaScript';
aLangKeys['en']['php']='PHP';
aLangKeys['en']['html']='HTML';
aLangKeys['en']['css']='CSS';
aLangKeys['en']['contact_us']='Contact us';
aLangKeys['en']['welcome']='Welcome guests';
aLangKeys['ru']['home']='???????';
aLangKeys['ru']['peoples']='???????????? >>';
aLangKeys['ru']['all_list']='???? ??????';
aLangKeys['ru']['online']='? ????';
aLangKeys['ru']['articles']='?????? >>';
aLangKeys['ru']['js']='?????????';
aLangKeys['ru']['php']='???';
aLangKeys['ru']['html']='????';
aLangKeys['ru']['css']='???';
aLangKeys['ru']['contact_us']='???????? ???';
aLangKeys['ru']['welcome']='????? ??????????';
$(document).ready(function() {
// onclick behavior
$('.lang').click( function() {
var lang = $(this).attr('id'); // obtain language id
// translate all translatable elements
$('.tr').each(function(i){
$(this).text(aLangKeys[lang][ $(this).attr('key') ]);
});
} );
});
// preparing language file
var aLangKeys=new Array();
aLangKeys['en']=new Array();
aLangKeys['ru']=new Array();
aLangKeys['en']['home']='Home';
aLangKeys['en']['peoples']='Peoples >>';
aLangKeys['en']['all_list']='All list';
aLangKeys['en']['online']='Online';
aLangKeys['en']['articles']='Articles >>';
aLangKeys['en']['js']='JavaScript';
aLangKeys['en']['php']='PHP';
aLangKeys['en']['html']='HTML';
aLangKeys['en']['css']='CSS';
aLangKeys['en']['contact_us']='Contact us';
aLangKeys['en']['welcome']='Welcome guests';
aLangKeys['ru']['home']='???????';
aLangKeys['ru']['peoples']='???????????? >>';
aLangKeys['ru']['all_list']='???? ??????';
aLangKeys['ru']['online']='? ????';
aLangKeys['ru']['articles']='?????? >>';
aLangKeys['ru']['js']='?????????';
aLangKeys['ru']['php']='???';
aLangKeys['ru']['html']='????';
aLangKeys['ru']['css']='???';
aLangKeys['ru']['contact_us']='???????? ???';
aLangKeys['ru']['welcome']='????? ??????????';
$(document).ready(function() {
// onclick behavior
$('.lang').click( function() {
var lang = $(this).attr('id'); // obtain language id
// translate all translatable elements
$('.tr').each(function(i){
$(this).text(aLangKeys[lang][ $(this).attr('key') ]);
});
} );
});
Here are most interesting part. Firstly I allocate my language array with keys and values. Currently it contain only 2 languages. But if you know more languages – you will easy to make more translations. So what I doing when I click button to switch language – running through all elements which marked as translatable (‘tr’ class), and apply custom value from our lang keys array depends on selected switcher value.
这是最有趣的部分。 首先，我为我的语言数组分配键和值。 目前，它仅包含2种语言。 但是，如果您知道更多的语言-您将很容易进行更多的翻译。 因此，当我单击按钮以切换语言时，在标记为可翻译的所有元素(“ tr”类)中运行并从lang键数组应用自定义值时，我所要做的取决于选择的切换器值。
现场演示
结论 (Conclusion)
I hope that today’s article was very interesting and not so difficult. Sure it will useful for your projects. Do not forget to say thank you :) Good luck!
我希望今天的文章非常有趣并且没有那么困难。 当然，这将对您的项目有用。 别忘了说谢谢:)祝你好运！
翻译自: https://www.script-tutorials.com/how-to-translate-your-site-in-runtime-using-jquery/
3224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
