源地址：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. 大二 Java上学期总结

    一学期的Java学习结束了,这学期对程序语言的理解更深了,首先感谢李津老师的教导,这学期收获挺多的,不像上学期,这学期没有任何缺课表现,希望之后的语言程序学习会更加努力. 突然感觉Java的学习如此之 ...

  2. 软技能-代码外的生存指南PDF下载

    编程只是我们职业生涯中的一部分,我们还需要更多的其他技能 链接:https://pan.baidu.com/s/1d7z_7NCEFT2lsSWO1n-OuA 提取码:zj32 链接失效请留言

  3. W3C标准定义的DOM由哪三部分组成

    DOM 定义了访问诸如 XML 和 XHTML 文档的标准.“W3C 文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口.”DOM 定义了所有 ...

  4. phpStudy配置sql、oracle---博主摘录

    引用 :https://www.cnblogs.com/myBlogInWork/p/8657125.html 由于工作需要,要用到php+oracle写个项目,故而有了以下内容: 本来以为php有默 ...

  5. Proxy does not work using sudo in Debian

    To resolve this issue you can add Defaults env_keep += "http_proxy https_proxy" to your /e ...

  6. 卸载OpenIV

    最近把 GTA5 卸载了,于是也想把用来修改 MOD 的 OpenIV 也卸载了. 结果在设置中,进行卸载的时候,弹出这个窗口 解决方案 1.首先打开 文件所在位置 2.右键,选择 属性,打开文件所在 ...

  7. vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知

    使用element-ui中的Notification,只有一个message属性是有很大的操作空间,其余的都是写死的,无法进行扩展,达不到想要的效果.所以只能在message上下功夫. 在elemen ...

  8. Java 组件化（gradle）

    组件化什么是组件化,直接看下面两张图. 上面是非组件化的项目,下面是组件化的项目. 非组件化的问题如果项目本身有多个互相不影响的模块,甚至有多人分开负责各个模块的开发时,非组件化项目的弊端就会暴露出来 ...

  9. editplus的使用技巧

    数据库sql语句中的 in 后面需要 ('xx','bb')这样的结果,多的话修改起来就比较麻烦,这时候使用editplus 的替换功能就可以实现 ,顶部菜单的 搜索 - > 替换 或者 ctr ...

  10. MIT-线性代数公开课

    本博客是学习MIT-线性代数笔记,Gilbert Strang大神讲的通俗易懂,感兴趣的可以观看视频 其中习题集请点击 01)方程组的几何解释 02)矩阵消元 03)乘法和逆矩阵 04)A的LU分解 ...