首页 前端知识 html页面 通过jquery.i18n.properties添加多语言

html页面 通过jquery.i18n.properties添加多语言

2024-02-06 15:02:02 前端知识 前端哥 851 612 我要收藏
第一步:
<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']);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1482.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!