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 相关文章推荐
js的正则test,match,exec详细解析
Jan 29 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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的call_user_func传reference引发的思考
2010/07/23 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
javascript常用函数(1)
2015/11/04 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
python实现聊天小程序
2018/03/13 Python
python 重命名轴索引的方法
2018/11/10 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
什么是索引指示器
2012/08/20 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
大学生秋游活动方案
2014/02/17 职场文书
会计员岗位职责
2014/03/15 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
干部作风建设工作总结
2014/10/29 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
婚庆答谢词大全
2015/09/29 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书