第一步:
<div class="set_lang">
<div class="lang_btn" data-langtype="zh">中文简体</div> |
<div class="lang_btn" data-langtype="hk">中文繁體</div> |
<div class="lang_btn" data-langtype="en">English</div>
</div>
第二步:
<script src="./assets/jquery.i18n.properties.min.js"></script>
<script>
/*
本地运行需要配置服务,不然jquery-i18n-properties中的语言文件会跨域;
Visual Studio Code 中下载LiveServer,index.html 右键运行 open width Live Serve
*/
$('.lang_btn').on('click', function () { //语言切换按钮
let langType = $(this).attr('data-langtype')
loadProperties(langType);
})
function loadProperties (lang) {
$.i18n.properties({
name: 'lang', //资源文件名称 , 命名格式: 文件名_国家代号.properties
path: './lang/', //资源文件路径,注意这里路径是你属性文件的所在文件夹,可以自定义
cache: false,
mode: 'map', //用 Map 的方式使用资源文件中的值
language: lang, //国家代号 name+language刚好组成属性文件名:lang+en -> lang_en.properties
callback: function () {
for (var i in $.i18n.map) {
$('[data-lang="' + i + '"]').text($.i18n.map[i]);
}
$(".search-input").attr('placeholder', $.i18n.map['search']);
}
});
}
loadProperties('en');
</script>
第三步:
新建 lang文件夹
lang_en.properties
page_title = Security Center
enter_phone_number = Enter phone number
lang_hk.properties
page_title = 安全中心
enter_phone_number = 輸入電話號碼
第四步:
dom中使用:
<div data-lang="page_title">安全中心</div>
<div data-lang="enter_phone_number">输入电话号码</div>
js中使用:
$(".selected_name").text($.i18n.map['page_title']);
$(".search-input").attr('placeholder', $.i18n.map['search']);