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 相关文章推荐
Textarea与懒惰渲染实现代码
Jan 04 Javascript
HTML上传控件取消选择
Mar 06 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
javascript头像上传代码实例
Sep 28 Javascript
微信小程序实现星级评价
Nov 20 Javascript
js制作提示框插件
Dec 24 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/10/17 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP中SESSION过期设置
2021/03/09 PHP
js里的prototype使用示例
2010/11/19 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
JavaScript里 ==与===区别详解
2016/08/16 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
python使用KNN算法手写体识别
2018/02/01 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
知识竞赛活动方案
2014/02/18 职场文书
梅花魂教学反思
2014/04/25 职场文书
协议书范文
2015/01/27 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
python not运算符的实例用法
2021/06/30 Python