i18n国际化的例子
这个可以点击菜单进行中英文切换,每次切换就可以改变sessionStorage.languge,进行改变i18n的参数lang的值,然后重新调用下就可以了。
工程结构:
i18n--|
|---css(这里是空的)
|--img(这里是空的)
|--js--|
|--i18n--|
|--messages_en_US.properties//国家化翻译文件
|--messages_en.properties//国家化翻译文件
|--messages_zh_CN.properties//国家化翻译文件
|--messages_zh.properties//国家化翻译文件
|--messages.properties//国家化翻译文件
|--jquery.i18n.properties.js//i18n插件
|--jquery-3.2.1.min.js
|--index.html
其中,index.html里边的代码是:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/jquery-3.2.1.min.js' type="text/javascript"></script>
<script src='js/jquery.i18n.properties.js' type="text/javascript"></script>
</head>
<body>
<span data-i18n="common.test"></span>
<script>
function loadProperties(name,path,lang){
var lang=lang || navigator.languge//没有传人语言时候,就用浏览器缓存的
$.i18n.properties({
name:name,//这个是参数path指定路径的首个单词,也就是资源文件名
path:path,//指定国际化映射文件的路径
mode:'map',//指定以键值对的形式获取资源
languge:lang,//指定语言类型中英文,举个例子:"zh_CN"为中文
callback:function(){//加载完成后的回调函数
$('[data-i18n]').each(function(){//遍历所有属性是data-i18n
$(this).html($.i18n.prop($(this).data("i18n")));//把这个属性值传入翻译后放到页面上
})
$('[data-i18n]').each(function(){//遍历所有属性是data-i18n
$(this).attr('placeholder',$.i18n.prop($(this).data("i18n")));//翻译placeholder属性值
})
}
})
}
var i18n=function(key){
return $.i18n.prop(key);
}
$(document).ready(function(){
loadProperties('messages','js/i18n/','zh_CN');//调用国际化函数
console.log(i18n("common.test"));//也可以直接在js里边定义之后调用翻译
})
</script>
</body>
</html>
messages_zh.properties文件内容是:
common.test=\u5220\u9664\u4E91\u684C\u9762
i18n国际化的例子的更多相关文章
- Django1.9开发博客(12)- i18n国际化
国际化与本地化的目的为了能为各个不同的用户以他们最熟悉的语言和格式来显示网页. Django能完美支持文本翻译.日期时间和数字的格式化.时区. 另外,Django还有两点优势: 允许开发者和模板作者指 ...
- Bootstrap-datepicker3官方文档中文翻译---I18N/国际化(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)
I18N/国际化 这个插件支持月份和星期名以及weekStart选项的国际化.默认是英语(“en”); 其他有效的译本语言在 js/locales/ 目录中, 只需在插件后包含您想要的地区. 想要添加 ...
- i18n(国际化) 和l18n(本地化)时的地域标识代码
i18n(国际化) 和l18n(本地化)时的地域标识代码 格式如 zh-CN(语言-国家) i18n(国际化) 和l18n(本地化)时的地域标识代码 格式如 zh-CN(语言-国家) 国家说明 语言说 ...
- i18n,国际化翻译,excel与js互转
背景 公司开发新产品时,要求适配多国语言,采用i18n国际化工具,但翻译字典(js的json)还是需要前端自己写的.字典最终需要转换成excel给专业人员翻译,翻译完成后再转换成js字典文件. 如果手 ...
- 【JavaWeb】i18n 国际化
i18n 国际化 什么是 i18n 国际化(Internationalization)指的是同一个网站可以支持多种不同的语言,以方便不同国家,不同语种的用户访问. 希望相同的一个网站,不同人访问的时候 ...
- vue 项目的I18n国际化之路
I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点:1. 语言语言本地 ...
- I18N 国际化
http://blog.sina.com.cn/s/blog_6c7e59770101p7w9.html 一.I18N 在 J2EE 中的应用 [转载:http://blog.csdn.net/cha ...
- Web---JSTL(Java标准标签库)-Core核心标签库、I18N国际化、函数库
前面为JSTL中的常用EL函数,后面的为具体演示实例! JSTL简介: JSTL(Java Standard Tag Library) –Java标准标签库. SUN公司制定的一套标准标签库的规范. ...
- Struts2 学习笔记17 I18N国际化
讲解一下国际化的内容,比如书有些大的网站可以一键切换语言,例如中英切换,这时候就会用到国际化.但是由于struts2大多数是用来写后台,国际化并不是十分重要,而且用国际化开发会减慢开发的速度,大家只要 ...
随机推荐
- C#根據當前DataGridView查詢數據導出Excel
private void btnsuggestinfo_Click(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.C ...
- windows sdk 设置窗体透明
#define WINVER 0x0501 #include <windows.h> /* Declare Windows procedure */ LRESULT CALLBACK Wi ...
- 【转】UpdateData()函数
一.总结UpdateData()函数 UpdateData(true);//用于将屏幕上控件中的数据交换到变量中. UpdateData(false);//用于将数据在屏幕中对应控件中显示出来. 当你 ...
- 01Oracle Database
Oracle Database Oracle Database又名Oracle RDBMS简称Oracle是甲骨文公司的一款关系数据库管理系统. Oracle Website.
- 第2节 mapreduce深入学习:10、手机号码进行分区
需求三:手机号码分区 在需求一的基础上,继续完善,将不同的手机号分到不同的数据文件的当中去,需要自定义分区来实现,这里我们自定义来模拟分区,将以下数字开头的手机号进行分开 135 开头数据到一个分区文 ...
- getHiddenProp() 浏览器状态切换改变
<script> function getHiddenProp() { var prefixes = ['webkit', 'moz', 'ms', 'o']; // if 'hidden ...
- 通过反编译小程序来学习前端:wxappUnpacker
小程序开发时,会有4种文件:.wxss .json .wxs .wxml. 正式上传到腾讯时,目录会被打包,使用时再发放给客户端. 这个文件包后缀是 .wxapkg.只要手机用过这个小程序,文件 ...
- BZOJ 3158 千钧一发 最小割
分析: 偶数对满足条件2,所有奇数对满足条件1. 如果你能一眼看出这个规律,这道题就完成了一半. 我们只需要将数分为两类,a值为奇数,就从S向这个点连容量为b值的边,a值为偶数,就从这个点向T连容量为 ...
- String与常量池(JDK1.8)
---- 基础知识 String是final类, 并且其方法都被final修饰 String通过char数组来保存字符串 对String对象的任何操作都不会影响到原来的String对象, 所有的改变都 ...
- [Python3网络爬虫开发实战] 2.3-爬虫的基本原理
我们可以把互联网比作一张大网,而爬虫(即网络爬虫)便是在网上爬行的蜘蛛.把网的节点比作一个个网页,爬虫爬到这就相当于访问了该页面,获取了其信息.可以把节点间的连线比作网页与网页之间的链接关系,这样蜘蛛 ...