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中动态效果小结
Dec 16 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
js实现省市级联效果分享
Aug 10 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
JavaScript 中的六种循环方法
Jan 06 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php 判断数组是几维数组
2013/03/20 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
农村婚礼证婚词
2014/01/08 职场文书
自考生自我评价分享
2014/01/18 职场文书
列车长先进事迹材料
2014/01/25 职场文书
建筑管理专业求职信
2014/07/28 职场文书
销售员试用期自我评价
2014/09/15 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书