【国际化】用JQuery-i18next的国际化demo,引入json
<!DOCTYPE html>
<html>
<head>
<title>jQuery i18next 示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/21.2.2/i18next.min.js"></script>
</head>
<body>
<div id="translation-container">
<p data-i18n="welcome.message"></p>
</div>
<script>
$(document).ready(function() {
i18next.init({
lng: 'en',
resources: {
en: {
translation: {
'welcome.message': 'Welcome to our website!'
}
},
zh: {
translation: {
'welcome.message': '欢迎访问我们的网站!'
}
}
}
}, function(err, t) {
// 初始化完成后进行翻译
$('#translation-container').i18n();
});
});
</script>
</body>
</html>
这个示例展示了如何使用jQuery和i18next进行简单的国际化。在初始化i18next时,我们直接在resources
对象中定义了两种语言的翻译,而不是从外部JSON文件加载。这样可以直观地在页面中看到翻译效果,而无需等待从服务器加载JSON文件。在实际应用中,通常会通过Ajax异步加载语言资源JSON文件。
评论已关闭