js使用i18n实现页面国际化的方法


Posted in Javascript onMay 09, 2017

页面引用的插件

<script type="text/JavaScript" src="${path}/plugings/jQuery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery.i18n.properties.min.js"></script>

以下是页面引用的js

/**
 * 设置语言类型: 默认为中文 
 */ 
var i18nLanguage = "zh-CN"; 
 
/* 
设置一下网站支持的语言种类 
zh-CN(中文简体)、en(英语) 
 */ 
var webLanguage = ['zh-CN', 'en']; 
 
//获取网站语言 
function getWebLanguage(){ 
   //1.cookie是否存在 
  if (jQuery.cookie("userLanguage")) { 
    i18nLanguage = jQuery.cookie("userLanguage"); 
    console.log("language cookie is "+i18nLanguage); 
  } else { 
    //2.1 获取用户设置的浏览器语言 
    var navLanguage = getNavLanguage(); 
    console.log("user set browser language is "+navLanguage); 
    if (navLanguage) { 
      // 判断是否在网站支持语言数组里 
      var charSize = $.inArray(navLanguage, webLanguage); 
      if (charSize > -1) { 
        i18nLanguage = navLanguage; 
        // 存到缓存中 
        jQuery.cookie("userLanguage ",navLanguage, {  
          expires : 7  
        }); 
      }; 
    } else{ 
      console.log("not navigator"); 
      return false; 
    } 
  } 
   
}
//国际化easyui中英文包 
function changeEasyuiLanguage(languageName) { 
  // when login in China the language=zh-CN  
  var src =$.contextPath+"/plugings/jquery-easyui/locale/easyui-lang-"+languageName.replace('-','_')+".js"; 
 console.log(src); 
 $.getScript(src); 
};
/** 
 * 执行页面i18n方法 
 * @return 
 * @author LH 
 */  
var execI18n = function(){ 
  //获取网站语言(i18nLanguage,默认为中文简体) 
  getWebLanguage(); 
    //国际化页面 
    jQuery.i18n.properties({ 
      name : "common", //资源文件名称 
      path : $.contextPath+"/i18n/"+i18nLanguage+"/", //资源文件路径 
      mode : 'map', //用Map的方式使用资源文件中的值 
      language : i18nLanguage, 
      cache:false, //指定浏览器是否对资源文件进行缓存,默认false 
      encoding: 'UTF-8', //加载资源文件时使用的编码。默认为 UTF-8。  
      callback : function() {//加载成功后设置显示内容 
        //以下是将要国际化的文字内容 
        //退出 
        $("#logOut").html($.i18n.prop('logOut')); 
        //用户 
        $("#loginUser").html($.i18n.prop('loginUser')) 
      } 
    }); 
}
/*页面执行加载执行*/ 
$(function(){ 
  /*执行I18n翻译*/ 
  execI18n(); 
  console.log("网站语言: "+i18nLanguage); 
  //国际化easyui 
  changeEasyuiLanguage(i18nLanguage);  
});

国际化的文件存放路径,zh-CN表示简体中文;en表示英语;也可扩展其它语言,只要在i18n文件夹下添加对应的文件;key要一一对应,value则是文字的语言内容

js使用i18n实现页面国际化的方法

中文的common.properties文件内容

login.userName=Username
login.passWord=Password
login.sub=Login
login.reset=Reset
login.anonymous=Anonymous

英文的common.properties文件内容

login.userName=Username
login.passWord=Password
login.sub=Login
login.reset=Reset
login.anonymous=Anonymous

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 #Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 #Javascript
JavaScript中splice与slice的区别
May 09 #Javascript
详解node中创建服务进程
May 09 #Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 #Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
微信小程序 标签传入数据
May 08 #Javascript
You might like
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python输出各行命令详解
2018/02/01 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python3 简单实现组合设计模式
2020/07/02 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
运动会广播稿30字
2014/01/21 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
库房管理员岗位职责
2014/03/09 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
学校2014年度工作总结
2014/12/06 职场文书
个人自荐书范文
2015/03/09 职场文书
简历中自我评价范文
2015/03/11 职场文书
国家助学金受助感言
2015/08/01 职场文书
2015年教师节广播稿
2015/08/19 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python