Lao*_*dao 8 html javascript multilingual jquery
我正在使用html来构建页面.问题是如何构建多语言切换？语言翻译不是问题,我有条款.但是,我不知道如何通过菜单栏上的语言按钮/下拉列表切换每页的btw？如果有现有的示例或模板,那就更好了.提前致谢.
M. *_*eed 24
好.作为我的答案的编辑,请遵循:
1 -创建一个名为language的文件夹并向其添加2个文件(es.json和en.json)
json文件的结构应该相同,但在翻译方面有所不同,如下所示:
en.json
{
"date": "Date",
"save": "Save",
"cancel": "Cancel"
}
es.json
{
"date": "Fecha",
"save": "Salvar",
"cancel": "Cancelar"
}
2 - 创建一个包含示例div的html页面,并放置2个链接以选择指向步骤3中列出的js函数的语言.
<a href="#" onclick="setLanguage('en')">English</a>
<a href="#" onclick="setLanguage('es')">Spanish</a>
<div id="div1"></div>
3 -创建2个java脚本函数来获取/设置所选语言:
<script>
var language;
function getLanguage() {
(localStorage.getItem('language') == null) ? setLanguage('en') : false;
$.ajax({
url: '/language/' + localStorage.getItem('language') + '.json',
dataType: 'json', async: false, dataType: 'json',
success: function (lang) { language = lang } });
}
function setLanguage(lang) {
localStorage.setItem('language', lang);
}
</script>
4 - 使用变量语言填充文本.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#div1').text(language.date);
});
</script>
我相信这回答了这个问题,因为我在跨多个站点实现了相同的概念.
注意:只需使用来自JQuery的document.ready之外的onclick事件,即可进行即时翻译(无需重新加载).这取决于您的情况.
由于您不熟悉前端，因此我想给您一个工作模板/示例，这是一个非常基本的尝试，使用iframe模拟两种不同语言的页面。至少在M. Taha完成关于提供多语言UI的通用前端框架的工作之前，这将至少为您提供一种实现方式的替代方法。
假设这个和这个是你分别在英语和法语，页面的版本，你可以那样做（小提琴这里）：
<html>
<body>
<select id="langselector" onchange="loadlang()">
<option value="en">English</option>
<option value="fr">French</option>
</select>
<p></p>
<iframe id="contents" src="https://jsfiddle.net/q2nw8o35/" width="1366" height="768" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<script>
function loadlang()
{
var lng = document.getElementById("langselector").value;
var cnt = document.getElementById("contents");
switch (lng)
{
case "en":
cnt.src = "https://jsfiddle.net/q2nw8o35/";
break;
case "fr":
cnt.src = "https://jsfiddle.net/jmn8c9tj/";
break;
}
}
</script>
</body>
</html>
现在，如果您构建页面的版本，而只是将src-s 的值替换为服务器上页面版本的路径，则可以在-内实现它iframe。进行一些试验（可以在JSFiddle上玩，很有趣）并且可能会有所帮助，您可以从那里继续前进，并寻找正确的方式，例如M.Taha尝试（例如，使用本地存储/ cookie来“记住”您以前的设置，依此类推）。
我的示例并不是要提供最终的框架等，而是应该将其视为一个非常基本的工作示例，可以暂时实现您想要的目标，或者直到提供更好的解决方案/答案为止。