源地址：https://www.jianshu.com/p/ea93efef5155

i18n实现前端国际化(实例)

0.1442018.08.27 16:25:10字数 246阅读 10563
在今日的需求中需要利用 i18n 这个框架来实现前端的国家化操作，下图是实现效果：

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

 
 

下面开始实现过程：

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

    其中：language.js 为自定义的 js 文件，用于实现页面逻辑，strings_en_US.properties
    和 strings_en_ZH.properties文件为语言文件。

  3. 首先我们在 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>
  1. 下面我们在两个语言中分别定义需要显示的文字：
    1. strings_en_ZH.properties文件：

      username=用户名：
      
password=密码:
      
lan_zh=中文
      
lan_en=英文
    2. strings_en_US.properties 文件： 
      username=User Name：
      
password=Password:
      
lan_zh=Chinese
      
lan_en=English
  2. 最后我们在 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'));

        }

    });

}

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

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

    在今日的需求中需要利用 i18n 这个框架来实现前端的国家化操作,下图是实现效果: 点击选择框实现网页上语言的切换: 下面开始实现过程: 所需工具:    - jquery-3.3.1.js 下载地址 ...

  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. c++ k^1

    如果k是偶数,则使k=k+1:若k是奇数,则使k=k-1.

  2. js获取url中的参数(解决中文乱码)

    这个是封装好的方法: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...

  3. RabbitMq学习5-路由(Routing)

    一.路由(Routing) 在前面的教程中,我们实现了一个简单的日志系统.可以把日志消息广播给多个接收者. 本篇教程中我们打算新增一个功能——使得它能够只订阅消息的一个字集.例如,我们只需要把严重的错 ...

  4. spark性能调优03-shuffle调优

    1.开启map端输出文件的合并机制 1.1 为什么要开启map端输出文件的合并机制 默认情况下,map端的每个task会为reduce端的每个task生成一个输出文件,reduce段的每个task拉取 ...

  5. 目标检测(三) Fast R-CNN

    引言 之前学习了 R-CNN 和 SPPNet,这里做一下回顾和补充. 问题 R-CNN 需要对输入进行resize变换,在对大量 ROI 进行特征提取时,需要进行卷积计算,而且由于 ROI 存在重复 ...

  6. HNUSTOJ-1051 最长的波动序列

    1051: 最长的波动序列 时间限制: 1 Sec  内存限制: 128 MB提交: 47  解决: 13[提交][状态][讨论版] 题目描述 有一个长度为N的整数序列,序列里面的数是两两不同的,现在 ...

  7. git命令？

    #文件及文件夹创建删除    mkdir  文件名称    (创建文件夹)    touch  文件名称    (创建文件)    rm -r  文件名称     (递归删除)    rm -rf 文 ...

  8. STL之 stack

    栈的常用操作函数:top()push()pop()size()empty() 建栈: stack<int> st; stack<int> st[4]; 四个栈 //可以使用li ...

  9. java复习(4)异常

    1.Java异常的分类和类结构图 1.Throwable是整个java异常体系的超类,所有的异常类都派生自这个类,包含Error和Exception这两个直接的子类,概括了所有能被当做异常跑出来的东西 ...

  10. Python基础2——数据类型的操作

    列表操作 列表.字符串.元组的切片总结: num=[1, 2, 3, 4, 5, 6] 1.切片是通过下面来切,下标可以正数,也可以是复数.注意:复数的话,最后一个值的下标为-1,往前面推导就是-1, ...