在今日的需求中需要利用 i18n 这个框架来实现前端的国家化操作，下图是实现效果：

点击选择框实现网页上语言的切换：

下面开始实现过程：

所需工具：
    - jquery-3.3.1.js 下载地址：jquery
    - jquery.i18n.properties.js jquery.i18n.properties.js
    搭建项目目录如下：

其中：language.js 为自定义的 js 文件，用于实现页面逻辑，strings_en_US.properties
    和 strings_en_ZH.properties文件为语言文件。
    首先我们在 index.html 中写上一定的测试页面代码，如下所示：

<!doctype html>  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport"  
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
 <meta http-equiv="X-UA-Compatible" content="ie=edge">  
 <title>国际化样例</title>  
</head>  
<body>  
 
<form>  
     <select class="lan_select">  
         <option class="lan_zh">中文</option>  
         <option class="lan_en">英文</option>  
     </select>
 </form>  
 
<label class="username"><!--用户名：--></label><input type="text">  
<label class="password"><!--密码：--></label><input type="password">  
 
<script type="application/javascript" src="JS/jquery-3.3.1.js"></script>  
<script type="application/javascript" src="JS/jquery.i18n.properties.js"></script>  
<script type="application/javascript" src="JS/language.js"></script>  
 
</body>  
</html>

下面我们在两个语言中分别定义需要显示的文字：
        strings_en_ZH.properties文件：

username=用户名：  
        password=密码:
        lan_zh=中文  
        lan_en=英文
           
        strings_en_US.properties 文件：

username=User Name：  
        password=Password:  
        lan_zh=Chinese  
        lan_en=English

最后我们在 language.js 中实现点击事件和切换方法，代码如下：

var LANGUAGE_Index = "zh_CN"; //标识语言  
 
jQuery(document).ready(function () {  
    // alert("页面加载时调用的方法");  
 
  LANGUAGE_Index = jQuery.i18n.normaliseLanguageCode({}); //获取浏览器的语言  
  loadProperties(LANGUAGE_Index);  
});  
 
 
$(".lan_select").change(function () {  
 
 
    if (($(".lan_select").val() === "英文") || ($(".lan_select").val() === "English")) {  
        LANGUAGE_Index = "en_US";  
  } else {  
        LANGUAGE_Index = "zh_CN";  
  }  
 
    loadProperties(LANGUAGE_Index);  
 
});  
 
 
function loadProperties(type) {  
    jQuery.i18n.properties({  
        name: 'strings', // 资源文件名称  
        path: 'Languages/', // 资源文件所在目录路径  
        mode: 'map', // 模式：变量或 Map  
        language: type, // 对应的语言  
        cache: false,  
        encoding: 'UTF-8',  
        callback: function () { // 回调方法  
            $('.lan_zh').html($.i18n.prop('lan_zh'));  
            $('.lan_en').html($.i18n.prop('lan_en'));  
            $('.username').html($.i18n.prop('username'));  
            $('.password').html($.i18n.prop('password'));  
        }  
    });  
}
---------------------
作者：Charles_Sir
来源：CSDN
原文：https://blog.csdn.net/kmonarch/article/details/82892389
版权声明：本文为博主原创文章，转载请附上博文链接！

i18n实现前端国际化(实例)的更多相关文章

  1. 【转】i18n实现前端国际化(实例)

    源地址:https://www.jianshu.com/p/ea93efef5155 i18n实现前端国际化(实例) 0.1442018.08.27 16:25:10字数 246阅读 10563 在今 ...

  2. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  3. 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  4. jquery.i18n.properties前端国际化方案

    如果新项目要做系统国际化, 时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl ...

  5. 【转】jQuery之前端国际化jQuery.i18n.properties

    jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties

  6. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  7. 前端系列——jquery前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  8. layui前端框架实例（修复官网数据接口异常问题）

    layui前端框架实例,官网的实例会提示数据接口异常,已修复. 主要是修改数据表格,做一个可以用的实例,可以选中,编辑,删除等. gitee地址:https://gitee.com/pingg2019 ...

  9. jQuery之前端国际化jQuery.i18n.properties

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...

随机推荐

  1. 随机队列 ADT接口 数组实现

    Random queue ADT接口 RANDOM.h #include <stdlib.h> #include "Item.h" #include <time. ...

  2. [POJ1741]Tree(点分治)

    树分治之点分治入门 所谓点分治,就是对于树针对点的分治处理 首先找出重心以保证时间复杂度 然后递归处理所有子树 对于这道题,对于点对(u,v)满足dis(u,v)<=k,分2种情况 路径过当前根 ...

  3. 20155211 《Java程序设计》实验一（Java开发环境的熟悉）实验报告

    20155211 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 步骤一(新建文件夹): ...

  4. 20155222 2016-2017-2 《Java程序设计》实验一

    实现Fibonacci数列功能,并进行测试. 源代码: import java.util.Scanner; public class fibonacci { public static void ma ...

  5. [note]左偏树(可并堆)

    左偏树(可并堆)https://www.luogu.org/problemnew/show/P3377 题目描述 一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 ...

  6. Yii 2.0 中事件的使用

    关于PHP的事件处理,参照 http://www.cnblogs.com/mafeifan/p/4322238.html http://www.cnblogs.com/mafeifan/p/43222 ...

  7. 如何下载YouTube 60fps视频

    YouTube上面不仅支持分辨率为4K和8K的视频,同时也开启了对60fps视频的支持.60帧的视频广泛用于游戏和体育视频中,使视频看起来更加流畅和细腻.对游戏玩家来说,YouTube对60fps支持 ...

  8. linux-ubuntu常用命令（深圳文鹏）

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  9. 使用IntelRealScene设备结合Cocos引擎实现体感游戏开发

    英特尔开发人员专区原文地址 Cocos游戏开发引擎对于广大开发者来说都比较熟悉,Intel RealScene是什么呢,简单理解是一种特殊的摄像头,可以捕捉用户的手势,面部表情等,进而实现AR,VR的 ...

  10. Siki_Unity_3-8_Lua编程（未完）

    Unity 3-8 Lua编程 任务1&2&3:前言 课程内容: Lua从入门到掌握 为之后的xLua和其他热更新方案打下基础 任务4:Lua简介 Lua是轻量小巧的脚本语言--无需编 ...