纯js国际化(i18n)
i18n，是internationalization单词的简写，中间18个字符略去，简称i18n，意图就是实现国际化，方便产品在不同的场景下使用
目标:可以点击切换语言或者ChangeLanguage的按钮 来完成英语和中文的切换
效果图如下:
实现方案：https://github.com/jquery-i18n-properties/jquery-i18n-properties
实现过程:
步骤一：代码结构
步骤2：实现html文件
<html lang="en"> <head>
<meta charset="UTF-8">
<title>国际化</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.i18n.properties.min.js"></script>
</head> <body> <label data-locale="User Name">用户名：</label><input type="text">
<label data-locale="Password">密码：</label><input type="password">
<button id='btn' data-locale="Btn Change">切换语言</button> <script type="text/javascript">
isEng = true
btn.onclick=function(){
if(!isEng){
loadProperties('en');
}else{
loadProperties('zh');
}
isEng = !isEng }
function loadProperties(lang) {
$.i18n.properties({
name: 'strings', //属性文件名 命名格式： 文件名_国家代号.properties
path: 'i18n/', //注意这里路径是你属性文件的所在文件夹
mode: 'map',
language: lang, //这就是国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties
callback: function () {
$("[data-locale]").each(function () {
console.log($(this).data("locale"));
$(this).html($.i18n.prop($(this).data("locale"))); });
}
});
}
loadProperties('en'); </script>
</body> </html>
核心思路：
既然要做国际化，我们得准备在不同语言情况下的词汇
将中英文的一些词汇和描述消息 放在i18n的文件夹中的strings_en.properties和strings_zh.properties
那么如果是中文环境，就按照strings_zh.properties这个文件中的词汇描述来；否则按照英文的来
这样一来，不同语言环境就可以加载不同的词汇了，国际化完毕
代码打包放在百度云了，希望能帮到更多的人:
https://pan.baidu.com/s/1Dl6jup_Igw9QHj9N2EQsSg
纯js国际化(i18n)的更多相关文章
- 国际化(i18n)
一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...
- javaweb学习总结(三十一)——国际化(i18n)
一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...
- Nuxt.js国际化vue-i18n的搭配使用
Nuxt.js国际化的前提是,已经使用脚手架工具搭建好了Nuxt.js的开发环境. 我使用的环境是nuxt@2.3 + vuetify@1.4 + vue-i18n@7.3 1. 先安装vue-i18 ...
- vue.js国际化vue-i18n插件的使用问题，在模版文本、组件方法、jsf方法里的使用
vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...
- javaweb基础(31)_国际化(i18n)
一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...
- SpringBoot 快速支持国际化i18n
学习目标 快速学会如何在工程中支持国际化语言. 快速查阅 专题阅读:<SpringBoot 布道系列> 源码下载:springboot-locale-i18n — Hey Man,Don' ...
- 纯JS实现俄罗斯方块，打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
随机推荐
- Android在应用设置里关闭权限，返回生命周期处理
问题 在处理6.0运行时权限时,很多人都忽略了这样一个问题: 在一个App应用里,如果已经允许了一个权限比如(读取通讯权限),此刻去调用相机,弹出权限申请对话框,此刻点击拒绝,然后经过处理后弹出去设置 ...
- HTML 笔记之 HTML 元素的概念
HTML 不是编程语言,它是一种标记语言 HTML 中常见的几个名词是 元素. 标签(开始标签和结束标签). 属性. 元素内容 这篇文章将要介绍的是 HTML 元素的概念 元素的概念 例子: < ...
- Zabbix邮件报警设置方法
实现目的: 在Zabbix服务端设置邮件报警,当被监控主机宕机或者达到触发器预设值时,会自动发送报警邮件到指定邮箱. 具体操作: 以下操作在Zabbix监控服务端进行 备注:Zabbix监控服务端 操 ...
- 05、Win7上openSSH的安装与配置
05.Win7上openSSH的安装与配置 1.概述 linux上的ssh命令在网络通信场景下非常方便.现在windows也支持ssh方式和远程主机进行访问.如果只是使用ssh简单的访问功能,就需要很 ...
- Django Form 表单
Form 表单功能 生成HTML表单元素检查表单元素的合法性验证如果错误,重复显示表单数据类型转换 Form相关的对象 Widget 渲染成HTML元素的工具Field Form对象中的一个字段For ...
- 从.net到java，从基础架构到解决方案。
这一年,职业生涯中的最大变化,是从.net到java的直接跨越,是从平台架构到解决方案的不断完善. 砥砺前行 初出茅庐,天下无敌.再学三年,寸步难行.很多时候不是别人太强,真的是自己太弱,却不自知. ...
- IOS NSNotificationCenter（通知 的使用）监听文本框的文字改变
监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...
- innobackupex实现对MySQL的增量备份与还原
备份增量备份是基于完整备份的,所以我们需要先做一次完整备份: innobackupex --defaults-file=/etc/my.cnf --user root --password cheng ...
- C++各大有名科学计算库(转)
在 C++中,库的地位是非常高的.C++之父 Bjarne Stroustrup先生多次表示了设计库来扩充功能要好过设计更多的语法的言论.现实中,C++的库门类繁多,解决的问题也是极其广泛,库从轻量级 ...
- BZOJ3932（主席树上二分+差分
按时间作为主席树的版本,每个版本的主席树都是一个权值线段树. 差分消去时间影响 对于当前时间版本的主席树查询前K大即可. 树上二分时结束后切记判定l==r的状态(易错 l==r叶子节点可能存在多个值( ...