这个可以点击菜单进行中英文切换，每次切换就可以改变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国际化的例子的更多相关文章

  1. Django1.9开发博客（12）- i18n国际化

    国际化与本地化的目的为了能为各个不同的用户以他们最熟悉的语言和格式来显示网页. Django能完美支持文本翻译.日期时间和数字的格式化.时区. 另外,Django还有两点优势: 允许开发者和模板作者指 ...

  2. Bootstrap-datepicker3官方文档中文翻译---I18N/国际化（原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html）

    I18N/国际化 这个插件支持月份和星期名以及weekStart选项的国际化.默认是英语(“en”); 其他有效的译本语言在 js/locales/ 目录中, 只需在插件后包含您想要的地区. 想要添加 ...

  3. i18n(国际化) 和l18n(本地化)时的地域标识代码

    i18n(国际化) 和l18n(本地化)时的地域标识代码 格式如 zh-CN(语言-国家) i18n(国际化) 和l18n(本地化)时的地域标识代码 格式如 zh-CN(语言-国家) 国家说明 语言说 ...

  4. i18n,国际化翻译，excel与js互转

    背景 公司开发新产品时,要求适配多国语言,采用i18n国际化工具,但翻译字典(js的json)还是需要前端自己写的.字典最终需要转换成excel给专业人员翻译,翻译完成后再转换成js字典文件. 如果手 ...

  5. 【JavaWeb】i18n 国际化

    i18n 国际化 什么是 i18n 国际化(Internationalization)指的是同一个网站可以支持多种不同的语言,以方便不同国家,不同语种的用户访问. 希望相同的一个网站,不同人访问的时候 ...

  6. vue 项目的I18n国际化之路

    I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点:1. 语言语言本地 ...

  7. I18N 国际化

    http://blog.sina.com.cn/s/blog_6c7e59770101p7w9.html 一.I18N 在 J2EE 中的应用 [转载:http://blog.csdn.net/cha ...

  8. Web---JSTL(Java标准标签库)-Core核心标签库、I18N国际化、函数库

    前面为JSTL中的常用EL函数,后面的为具体演示实例! JSTL简介: JSTL(Java Standard Tag Library) –Java标准标签库. SUN公司制定的一套标准标签库的规范. ...

  9. Struts2 学习笔记17 I18N国际化

    讲解一下国际化的内容,比如书有些大的网站可以一键切换语言,例如中英切换,这时候就会用到国际化.但是由于struts2大多数是用来写后台,国际化并不是十分重要,而且用国际化开发会减慢开发的速度,大家只要 ...

随机推荐

  1. Eureka 整理

    服务治理:(该模块也可以使用集群) 该模块主要负责完成微服务架构中的服务治理功能. 1.构建服务注册中心. 每个服务单元需要向注册中心登记自己提供的服务. 2.服务注册与服务发现. 服务之间的调用不再 ...

  2. 如何把datetime类型字段修改为int类型

    如何把datetime类型字段修改为int类型 我有一个表为:table1 其中有一个datetime类型的字段  a    现在我想我想把字段a的类型改为int类型 当我执行以下命令时报如下的错误a ...

  3. JS如何禁用浏览器的退格键

    <script type="text/javascript"> //处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 function forb ...

  4. 笔试算法题（08）：输出倒数第K个节点

    出题:输入一个单向链表,要求输出链表中倒数第K个节点 分析:利用等差指针,指针A先行K步,然后指针B从链表头与A同步前进,当A到达链表尾时B指向的节点就是倒数第K个节点: 解题: struct Nod ...

  5. Spring 实现 IoC

    理解 “ 控制反转(IoC)”   控制反转(IoC):用白话来讲,就是由 Spring 容器控制程序中类与类之间的关系,而非传统实现中,由程序代码直接操控.这也就是所谓 “控制反转” 的概念所在:控 ...

  6. linux学习笔记 磁盘存储之磁盘的基本组成结构

  7. virtualenvwrapper.sh: There was a problem running the initialization hooks. If Python could not import the module virtualenvwrapper.hook_loader, check that virtualenvwrapper.........（解决办法）

    Linux(ubuntu)上python2与python3共存环境下,安装virtualenvwrapper后, 其环境变量被自动设置为VIRTUALENVWRAPPER_PYTHON=/usr/bi ...

  8. 安装 asp.net core 出错

    I received the same error message on a fresh Windows 10 install, with a fresh Visual Studio 2015 ins ...

  9. webstrom破解-webstrom2018.2.4破解方法(xjl456852原创)

    方法一: 获取注册码: http://idea.lanyus.com/ 方法二: 使用破解补丁 放在安装目录的bin目录下,并且编辑bin目录下的文件 如果使用的32位的webstrom就编辑webs ...

  10. C#上位机开发（一）—— 了解上位机

    在单片机项目开发中,上位机也是一个很重要的部分,主要用于数据显示(波形.温度等).用户控制(LED,继电器等),下位机(单片机)与 上位机之间要进行数据通信的两种方式都是基于串口的: USB转串口 — ...