多语言切换jquery.i18n.min.js
项目需求,切换多语言,采用
jQuery.i18n.min.js文件内容如下
-------------------------------------------------
/*!
* jquery i18n Plugin v1.0.0
* https://github.com/ZOMAKE/jquery.i18n
*
* Copyright 2017 ZOMAKE,Inc.
* Released under the Apache Licence 2.0
*/
(function($) {
$.fn.extend({
i18n: function(options) {
var defaults = {
lang: "",
defaultLang:"",
filePath:"/i18n/",
filePrefix:"i18n_",
fileSuffix:"",
forever: true,
callback: function() {}
};
function getCookie(name) {
var arr =document.cookie.split('; ');
for (var i = 0; i <arr.length; i++) {
var arr1= arr[i].split('=');
if(arr1[0] == name) {
return arr1[1];
}
}
return '';
};
function setCookie(name, value,myDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + myDay);
document.cookie = name+ '=' + value + '; expires=' + oDate;
};
var options = $.extend(defaults,options);
if (getCookie('i18n_lang') != ""&& getCookie('i18n_lang') != "undefined" &&getCookie('i18n_lang') != null) {
defaults.defaultLang =getCookie('i18n_lang');
} else if (options.lang =="" && defaults.defaultLang == "") {
throw "defaultLangmust not be null !";
};
if (options.lang != null &&options.lang != "") {
if (options.forever) {
setCookie('i18n_lang', options.lang);
} else {
$.removeCookie("i18n_lang");
}
} else {
options.lang =defaults.defaultLang;
};
var i = this;
$.getJSON(options.filePath +options.filePrefix + options.lang + options.fileSuffix + ".json", function(data){
var i18nLang = {};
if (data != null) {
i18nLang= data;
}
$(i).each(function(i) {
vari18nOnly = $(this).attr("i18n-only");
if($(this).val() != null && $(this).val() != "") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "value") {
$(this).val(i18nLang[$(this).attr("i18n")])
}
}
if($(this).html() != null && $(this).html() != "") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "html") {
$(this).html(i18nLang[$(this).attr("i18n")])
}
}
if($(this).attr('placeholder') != null && $(this).attr('placeholder') !="") {
if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "placeholder") {
$(this).attr('placeholder',i18nLang[$(this).attr("i18n")])
}
}
});
options.callback();
});
}
});
})(jQuery);
----------------------------------------------------------------------------------------------------
将语言文件放到webapp的i18n目录下
i18n_chinese.json类似内容如下
{
"code":"邮编",
"contactTelephone":"联系电话",
"email":"邮箱"}
i18n_english.json
{
"code":"Code",
"contactTelephone":"ContactTelephone",
"email":"Email"}
想要切换语言 给标签添加i18n属性
如<li i18n=" code">邮编</li>
我是通过Cookie方式绑定当前语言的,提取language.jsp如下:
<!DOCTYPE html>
<%@page language="Java"pageEncoding="UTF-8"%>
<script type="text/JavaScript"src="${ctx}/anfangyun/js/jquery.i18n.min.js"></script>
<script>
function setCookieLanguage(name,value) {
document.cookie = name + '=' + value ;
};
function getCookieLanguage(name) {
vararr = document.cookie.split('; ');
for(vari = 0; i < arr.length; i++) {
var arr1 = arr[i].split('=');
if (arr1[0] == name) {
return arr1[1];
}
}
return'';
};
$(function(){
//切换语言begin
//获取浏览器默认语言
var languageType =navigator.browserLanguage?navigator.browserLanguage:navigator.language;
if (languageType.indexOf('zh')>-1 &&getCookieLanguage("languageCookie")==""){
$("[i18n]").i18n({defaultLang:"chinese"});
}
if (languageType.indexOf('en')>-1 &&getCookieLanguage("languageCookie")==""){
$("[i18n]").i18n({defaultLang:"english"});
}
if (languageType.indexOf('ru')>-1 &&getCookieLanguage("languageCookie")==""){
$("[i18n]").i18n({defaultLang:"russian"});
}
//切换为中文 - 按钮
$("#chinese").click(function() {
$("[i18n]").i18n({defaultLang:"chinese"});//选择文件i18n_chinese.json
setCookieLanguage("languageCookie","chinese");
});
//切换为英文 - 按钮
$("#english").click(function() {
$("[i18n]").i18n({defaultLang:"english"});//选择文件i18n_english.json
setCookieLanguage("languageCookie","english");
});
//切换为俄文 - 按钮
$("#russian").click(function() {
$("[i18n]").i18n({defaultLang:"russian"});//选择文件i18n_russian.json
setCookieLanguage("languageCookie","russian");
});
//点击后有cookie,定位选择文件名字
if (getCookieLanguage("languageCookie").indexOf("chinese")>-1){
$("#chinese").addClass('cur');
$("[i18n]").i18n({defaultLang:"chinese"});
//更改头部图片
$(".afy_hd_capt").css("background-p_w_picpath","url(${ctx}/anfangyun/p_w_picpaths/afy_hd_capt.png)");
$(".afy_hd_dire").css("background-p_w_picpath","url(${ctx}/anfangyun/p_w_picpaths/afy_hd_dire.png)");
}
if (getCookieLanguage("languageCookie").indexOf("english")>-1){
$("[i18n]").i18n({defaultLang:"english"});
}
if (getCookieLanguage("languageCookie").indexOf("russian")>-1){
$("[i18n]").i18n({defaultLang:"russian"});
}
//切换语言end
});
</script>
----------------------
转载于:https://blog.51cto.com/leapping/1946791
多语言切换jquery.i18n.min.js相关推荐
- jquery.validate.min.js使用介绍
jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方 ...
- jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined
Jquery DataTable使用报这个错: jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' o ...
- jquery.placeholder.min.js让你的IE浏览器支持placeholder
2019独角兽企业重金招聘Python工程师标准>>> jquery.placeholder.min.js让你的IE浏览器支持placeholder http://www.ijque ...
- 异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...
- jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property ‘style‘ of undefined原因
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 报错: jquery.dataTables.min.js:62 Uncaught TypeError ...
- HTML网页使用CDN的jquery.qrcode.min.js生成页面二维码(直接可以复制使用)
HTML页面代码 <!DOCTYPE html> <html> <head><title></title><meta http-equ ...
- jquery.validate.min.js 插件
1.导入js库: 注意:(在这里我导入的单单是jquery.validate.min.js,没有导入jq的其它,不要忘记哦) <script src="http://static.ru ...
- Qrcode生成二维码 之jquery.qrcode.min.js
PHP交流群:294088839, Python交流群:652376983, GO交流群:874512552. jquery-1.8.3_min.js和jquery.qrcode.min.js jq ...
- 幻灯片插件-jquery.sliderPro.min.js
https://github.com/bqworks/slider-pro/blob/master/docs/modules.md#modules 使用方法 在页面中引入必要的文件: <link ...
最新文章
- QT的QRenderStateSet 类的使用
- Adobe FLASH CS3快捷键(时间轴常用)
- LDAP命令介绍---dsconfig子命令----help-distribution显示与分发相关的子命令
- mount 安卓system只读_Android如何让system分区可读写(MTK安卓6.0)-阿里云开发者社区...
- 纽芬兰纪念大学计算机系怎么样,纽芬兰纪念大学计算机
- 服务器400_瓜分400万filecoin的入门条件:现货服务器
- 04-12 常见接口安全问题及解决方案
- 超融合平台安装oracle,超融合平台集成实施方案
- centos 6.5 安装rsync
- Reacvt-Native 图片下载使用介绍
- 天天生鲜项目——用户收货地址页
- 手机整人脚本html,教大家用vbs代码制作恶搞整人
- Cityscapes数据集gtFine部分介绍
- h5 iOS 刘海屏适配
- Python期末复习题:流程控制
- 华为ensp,DHCP中继配置
- 机器学习 - SVD分解算法的物理意义
- 【面部重演+3D控制】PIRender:控制你想控制的人物
- 一键清理微信小红点,就是这么简单
- 如何运用DDD(一):值对象
热门文章
- MIT科学家首次发现只对歌唱有反应的神经元,对,只能人声带伴奏的那种歌
- 人类首次商业太空行走敲定!马斯克SpaceX宣布新一轮太空旅行计划,美国富豪成回头客...
- 人刚毕业,在小米造狗没有KPI,雷军奖励100万美金
- 人造肌肉机械臂太逼真引热议,举7kg哑铃“肌肉”清晰可见,网友:《西部世界》...
- 量子信息先行者中科院院士郭光灿:“要把中国量子计算机卖到国外”
- 今年芯片行业最大收购案:亚德诺209亿美元收购美信,对抗行业老大德州仪器...
- 马斯克SpaceX内部信曝光:戒骄戒躁,我们的首要任务是星际飞船
- 今日可抢回程火车票,实测两款GitHub开源抢票插件,所有坑我们都帮你踩过了...
- 倒下的RoadStar结局来了:VC清盘止损,三位创业者承担1亿债务,打着官司各投林...
- HTML5学习路线资料,HTML5前端面试的技术栈