161 lines
4.7 KiB
JavaScript
161 lines
4.7 KiB
JavaScript
//网站默认语言标识
|
||
var languageKey = "zh_CN";
|
||
/*
|
||
设置一下网站支持的语言种类
|
||
zh_CN(中文简体)、en_US(英语)
|
||
*/
|
||
var languageArray = ['zh_CN', 'en_US'];
|
||
|
||
/**
|
||
* 页面初始化执行方法
|
||
*/
|
||
$(document).ready(async function () {
|
||
//1.cookie是否存在
|
||
if ($.cookie("userLanguage")) {
|
||
languageKey = $.cookie("userLanguage");
|
||
} else {
|
||
//2.1 获取用户设置的浏览器语言
|
||
var webLanguage = $.i18n.normaliseLanguageCode({});
|
||
var charSize = $.inArray(webLanguage, languageArray);
|
||
if (charSize > -1) {
|
||
languageKey = webLanguage;
|
||
// 存到缓存中
|
||
$.cookie("userLanguage", webLanguage, {
|
||
expires: 7
|
||
});
|
||
} else {
|
||
//不支持的语言，使用默认中文
|
||
}
|
||
}
|
||
$(".lan_select").val(languageKey)
|
||
|
||
/**
|
||
* js中调用翻译代码示例（方法一）
|
||
*/
|
||
// let selectElement = document.getElementById('mySelect');
|
||
// // 定义选项数据
|
||
// let optionsData = [
|
||
// {
|
||
// value: '1',
|
||
// //这里以js文件中name为例，进行翻译
|
||
// text: 'tel'
|
||
// },
|
||
// {
|
||
// value: '2',
|
||
// text: 'name'
|
||
// },
|
||
// ];
|
||
// console.log(optionsData,76)
|
||
// // 填充<select>元素
|
||
// optionsData.forEach(option => {
|
||
// const newOption = document.createElement('option');
|
||
// //给元素添加翻译标识
|
||
// newOption.setAttribute("data-translate",option.text)
|
||
// newOption.value = option.value;
|
||
// newOption.textContent = option.text;
|
||
// selectElement.appendChild(newOption);
|
||
// });
|
||
loadProperties(languageKey);
|
||
jsDemo();
|
||
});
|
||
|
||
/**
|
||
* js中调用翻译代码示例（方法二）
|
||
*/
|
||
async function jsDemo() {
|
||
let selectElement = document.getElementById('mySelect');
|
||
// 定义选项数据
|
||
let optionsData = [
|
||
{
|
||
value: '1',
|
||
//这里以js文件中name为例，进行翻译
|
||
text: await getTextByTranslationKey('tel')
|
||
},
|
||
{
|
||
value: '2',
|
||
text: await getTextByTranslationKey('name')
|
||
},
|
||
];
|
||
// 填充<select>元素
|
||
optionsData.forEach(option => {
|
||
const newOption = document.createElement('option');
|
||
//给元素添加翻译标识
|
||
// newOption.setAttribute("data-translate",option.text)
|
||
newOption.value = option.value;
|
||
newOption.textContent = option.text;
|
||
selectElement.appendChild(newOption);
|
||
});
|
||
}
|
||
/**
|
||
* 语言切换事件监听，切换后存cookie
|
||
*/
|
||
$(".lan_select").change(function () {
|
||
languageKey = $(".lan_select").val()
|
||
$.cookie("userLanguage", languageKey, {
|
||
expires: 7
|
||
});
|
||
loadProperties(languageKey);
|
||
location.reload();
|
||
});
|
||
|
||
/**
|
||
* 自动翻译页面内容
|
||
* @param type 语言包标识
|
||
*/
|
||
function loadProperties(type) {
|
||
$.i18n.properties({
|
||
name: 'strings', // 资源文件名称
|
||
path: 'languages/', // 资源文件所在目录路径
|
||
mode: 'map', // 模式：变量或 Map
|
||
language: type, // 对应的语言
|
||
cache: false,
|
||
encoding: 'UTF-8',
|
||
callback: function () {
|
||
// 回调方法
|
||
$('[data-translate]').each(function () {
|
||
//遍历每一个需要翻译的元素，本次翻译text
|
||
var translationKey = $(this).data('translate');
|
||
$(this).text($.i18n.prop(translationKey));
|
||
});
|
||
$('[data-translate-placeholder]').each(function () {
|
||
//遍历每一个需要翻译的元素，本次翻译placeholder
|
||
var translationKey = $(this).data('translate-placeholder');
|
||
$(this).attr("placeholder", $.i18n.prop(translationKey))
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 获取指定翻译内容按钮点击执行方法---临时演示用，可以删掉
|
||
*/
|
||
function getKeyClick() {
|
||
getTextByTranslationKey($("#data_key").val())
|
||
}
|
||
/**
|
||
* 主动翻译指定key
|
||
* @param translationKey 需要翻译的key
|
||
*/
|
||
function getTextByTranslationKey(translationKey) {
|
||
return new Promise((resolve, reject) => {
|
||
$.i18n.properties({
|
||
name: 'strings', // 资源文件名称
|
||
path: 'languages/', // 资源文件所在目录路径
|
||
mode: 'map', // 模式：变量或 Map
|
||
language: languageKey, // 对应的语言
|
||
cache: false,
|
||
encoding: 'UTF-8',
|
||
callback: function () {
|
||
// 回调方法
|
||
//这一行演示用，可以删掉
|
||
$("#data_key_text").text($.i18n.prop(translationKey))
|
||
resolve($.i18n.prop(translationKey))
|
||
}
|
||
});
|
||
})
|
||
}
|
||
|
||
|
||
|
||
|