摘要:本文分享了一个基于 jQuery 的轻量级的国际化 (i18n) 插件,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
一个基于jQuery的轻量级的国际化(i18n)插件。
· 支持根据设置默认语言
· 支持切换语言
· 支持使用json文件存储翻译内容
可以根据用户自定义的不同语言版本的json文件,按需渲染网页上的语言,实现国际化。
安装
您可以到github.com/ZOMAKE/jque… 下载最新版本
在项目中先引入jQuery文件:
<script src="jquery.js"></script>
然后在jQuery之后引入jquery.i18n.js:
<script src="jquery.i18n.js"></script>
使用方法
首先在项目中新建 i18n 文件夹,在此文件夹下放置不同语言版本的 i18n_xx.json 语言文件。(您也可以自定义文件名的开头和结尾如BaiduCnLang.js,下面的示例中以i18n_为文件名开头)
在需要使用国际化功能的DOM结构处引入i18n属性(i18n中的value为语言文件中key,可自定义):
<div i18n="i18n.test">multi-language</div><div i18n="i18n.test2">internationalization</div>
接着只需在语言文件中增加内容。 例如中文版的语言文件命名为 i18n_cn.json,英文版的语言文件命名为 i18n_en.json:
i18n_cn.json: { "i18n.test": "多语言", "i18n.test2": "国际化" }
与之对应的翻译文件 i18n_en.json:
{ "i18n.test": "multi-language", "i18n.test2": "internationalization" }
最后在脚本中执行如下方法,初始化该插件。
$("[i18n]").i18n({ defaultLang: "en", filePath: "/i18n/", filePrefix: "i18n_", fileSuffix: "", forever: true, callback: function() { } });
配置
defaultLang
defaultLang: defaultLang,
默认语言名称,插件会自动将 filePrefix+defaultLang+fileSuffix 拼接在一起作为语言文件文件名。
filePath
filePath: "/i18n/",
该参数指定了语言文件所在文件夹在项目中的位置。
filePrefix
filePrefix: "i18n_",
该参数指定了语言文件的命名的前缀。
fileSuffix
fileSuffix: "",
该参数指定了语言文件的命名的后缀。
callback callback:function(){ //do something } i18nOnly
默认会将HTML元素的placeholder、value、html一起进行翻译替换,如果您只需要替换其中一个,可以在HTML标签中声明 i18nOnly 属性。
<input i18n="i18n.test" i18n-only="placeholder" placeholder="多语言"></input>
本文由职坐标整理发布,欢迎关注职坐标WEB前端jQuery频道,获取更多jQuery知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号