源地址: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. [转帖]怎样选择(FC-SAN)光纤通道(存储)交换机

    怎样选择(FC-SAN)光纤通道(存储)交换机 https://blog.csdn.net/sinat_30171789/article/details/50510936 交换机的种类非常多...   ...

  2. QT DBUS: Not connected to D-Bus server, 注意source /etc/profile

    运行环境:ARM 运行如下代码: QDBusConnection bus = QDBusConnection::sessionBus(); if(!bus.registerService(" ...

  3. 洛谷P1155 双栈排序题解(图论模型转换+二分图染色+栈)

    洛谷P1155 双栈排序题解(图论模型转换+二分图染色+栈) 标签:题解 阅读体验:https://zybuluo.com/Junlier/note/1311990 原题地址:洛谷P1155 双栈排序 ...

  4. 3.golang 的注释

    package main import ( "fmt" "math" ) func main() { fmt.Println(pi(5000)) } // pi ...

  5. GUI自动化测试中优化测试用例思维方法

    1.测试脚本与数据解耦(数据驱动) 让操作相同但是数据不同的测试可以通过同一 套自动化测试脚本来实现,只是在每次测试执行时提供不同的测试输入数据. 2.页面对象模型(POM) 以页面为单位来封装页面上 ...

  6. [LeetCode] 103. 二叉树的锯齿形层次遍历

    题目链接 : https://leetcode-cn.com/problems/binary-tree-zigzag-level-order-traversal/ 题目描述: 给定一个二叉树,返回其节 ...

  7. Javascript高级面试

    原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...

  8. 表单提交 multipart/form-data 和 x-www-form-urlencoded的区别

    表单提交表单有两种提交方式,POST和GET.通常我们会使用POST方式,一是因为形式上的安全 :二是可以上传文件. 我之前经常忽略掉表单的编码类型,觉得它特别长比较难记,而且不设置也似乎不影响什么. ...

  9. 关于spring 获取不到网站上的xsd的处理记录

    前两天做一个项目还好好的,今天突然报出这个错误 cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration ...

  10. Codeforces Round #427 (Div. 2) - B

    题目链接:http://codeforces.com/contest/835/problem/B 题意:给定一个数k和一个数字串n.问你最少改几个数字才能满足所有数字的和不小于k. 思路:考虑贪心,每 ...