بالطبع تستطيع ربط ترجمة مع عنصر "select" لتمكين المستخدمين من تبديل اللغات بسهولة. يمكنك استخدام i18next.js مع عنصر "select" عن طريق تحديد قيمة "value" لكل خيار وتحديد اللغة المناسبة باستخدام i18next.js عند تحديد خيار محدد.
<!DOCTYPE html>
<html>
<head>
<title>My multilingual website</title>
<script src="https://cdn.jsdelivr.net/npm/i18next/dist/umd/i18next.min.js"></script>
</head>
<body>
<h1 data-i18n="greeting">Hello, world!</h1>
<p data-i18n="description">This is a multilingual website.</p>
<select id="languageSelect">
<option value="en">English</option>
<option value="es">Español</option>
</select>
<script>
i18next.init({
lng: 'en',
resources: {
en: {
translation: {
greeting: 'Hello, world!',
description: 'This is a multilingual website.'
}
},
es: {
translation: {
greeting: '¡Hola mundo!',
description: 'Este es un sitio web multilingüe.'
}
}
}
}, function(err, t) {
// initialized and ready to go!
// translate document to the user language
i18next.changeLanguage(navigator.language || navigator.userLanguage, function(err, t) {
// resources have been loaded
document.querySelector('[data-i18n="greeting"]').innerHTML = t('greeting');
document.querySelector('[data-i18n="description"]').innerHTML = t('description');
// update language on select change
document.getElementById('languageSelect').addEventListener('change', function(e) {
var newLanguage = e.target.value;
i18next.changeLanguage(newLanguage, function(err, t) {
document.querySelector('[data-i18n="greeting"]').innerHTML = t('greeting');
document.querySelector('[data-i18n="description"]').innerHTML = t('description');
});
});
});
});
</script>
</body>
</html>
مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.
التعليقات