jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化。

jQuery.i18n.properties 采用 .properties 文件对 JavaScript 进行国际化。jQuery.i18n.properties 插件根据用户指定的(或浏览器提供的 )语言和国家编码(符合 ISO-639 和 ISO-3166 标准)来解析对应的以“.properties”为后缀的资源文件。

jQuery.i18n.properties 插件首先加载默认的资源文件(例如:strings.properties),然后加载针对特定语言环境的资源文件(例如:strings_zh.properties),这就保证了在未提供某种语言的翻译时,默认值始终有效。开发人员可以以 JavaScript 变量(或函数)或 Map 的方式使用资源文件中的 key。

接下来具体说怎样实现前端的国际化:

第一步:创建properties资源文件。

例如创建如下文件名 :为 strings.properties,那么与之对应的必须要有 strings_zh.properties,两个文件名的key 值必须保持一致。

strings.properties文件中书写例子:username= User Name

strings_zh.properties文件中书写例子:username=用户名                        需要注意的是两个文件名的键值必须保持一致

第二步:在js文件中引入jQuery.i18n.properties所需js文件。(当然在此之前需引入jquery文件)

<script type="text/javascript" src="js/jquery.i18n.properties.js"></script>

第三步:使用jQuery.i18n.properties 的API

//国际化加载属性文件
$.i18n.properties({
name: 'strings', //定义的资源文件中语言简码前面的字符串,可以是一个数组
path: 'i18n/', //资源文件的相对路径,对于整个工程来说的
language:'zh', //以哪种语言显示,这里zh对应的是资源文件中strings_zh.properties这个文件的内容,en对应另一个文件名,如果语言多的话,可以在资源文件配置前写strings_en.properties
//加载模式,”vars”表示以JavaScript变量或函数的形式加载资源文件中的key值(默认为这种),“map”表示以map的方式加载资源文件中的key值。“both表示可以同时使用这两种方式”。
mode: 'map',
callback: function() { // 加载成功后设置显示内容,回调函数
alert($.i18n.prop('username')); //用户名(对应资源文件配置的)
}
});

第四步:可以根据回调函数返回的的数据来设置页面的内容

$.i18n.prop('username');对应着资源文件中的key值

$("#id").html($.i18n.prop('username'))

通过以上四步可以实现一个简单的前端国际化。

遇到问题:在创建资源文件时候,会弹出一个框提示你保存格式什么的,保存为utf-8格式就可以。

国际化实现之基于jquery的更多相关文章

  1. 基于JQuery的获取鼠标进入和离开容器方向的实现

    做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...

  2. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  3. 基于jQuery的自适应图片左右切换

    效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...

  4. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  5. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  6. 模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  7. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  8. 模仿win10样式,基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  9. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

随机推荐

  1. 梯度下降VS随机梯度下降

    样本个数m,x为n维向量.h_theta(x) = theta^t * x梯度下降需要把m个样本全部带入计算,迭代一次计算量为m*n^2 随机梯度下降每次只使用一个样本,迭代一次计算量为n^2,当m很 ...

  2. Thread in depth 2:Asynchronization and Task

    When we want to do a work asynchronously, creating a new thread is a good way. .NET provides two oth ...

  3. SQL Server Extended Events 进阶 2:使用UI创建基本的事件会话

    第一阶中我们描述了如何在Profiler中自定义一个Trace,并且让它运行在服务器端来创建一个Trace文件.然后我们通过Jonathan Kehayias的 sp_SQLskills_Conver ...

  4. JaveScript之CSS变量

    大概是CSS3吧,出了一个叫CSS变量的东西,也叫自定义属性,还是比较有用的东东,可以用JavaScript灵活控制,变量作用 我们来实现一个div跟随鼠标滚动的小东西用来说明如何自定义变量 :roo ...

  5. .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法

    FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...

  6. 微信游戏《全民炫舞》开发公司h3d2 engine和QQ炫舞2 布料系统技术介绍

    H3D公司开发的<全民炫舞>上线了. 蝉联IOS榜首很多天. 整理了一下过去公司游戏引擎开发的历史.有兴趣可以去看看 公司游戏引擎开发历史介绍: http://www.h3d.com.cn ...

  7. 【cocos2d-x 仙凡奇缘-网游研发(1) 登录&注册】

    转载请注明出处:http://www.cnblogs.com/zisou/p/xianfan01.html 公司的项目总算告一段落了,年前憋到年后,总算要上线了,所以我也有了时间来搞我自己的游戏项目了 ...

  8. Swift实战-小QQ(第3章):QQ主界面布局

    1.导航栏外观设定*在AppDelegate.swift文件中的didFinishLaunchingWithOptions方法添加以下代码 func application(application: ...

  9. SqlAlchemy操作(一)

    博客转载于 http://www.cnblogs.com/haiyan123/p/8270520.html 一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB ...

  10. 廖雪峰Python学习笔记——使用元类

    元类(MetaClasses) 元类提供了一个改变Python类行为的有效方式. 元类的定义是“一个类的类”.任何实例是它自己的类都是元类. class demo(object): pass obj ...