【转】i18n实现前端国际化(实例)
源地址：https://www.jianshu.com/p/ea93efef5155
i18n实现前端国际化(实例)
在今日的需求中需要利用 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'));
}
});
}【转】i18n实现前端国际化(实例)的更多相关文章
- i18n实现前端国际化(实例)
在今日的需求中需要利用 i18n 这个框架来实现前端的国家化操作,下图是实现效果: 点击选择框实现网页上语言的切换: 下面开始实现过程: 所需工具: - jquery-3.3.1.js 下载地址 ...
- jquery.i18n.properties前端国际化解决方案“填坑日记”
但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...
- 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”
前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...
- jquery.i18n.properties前端国际化方案
如果新项目要做系统国际化, 时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl ...
- 【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
- Web前端国际化之jQuery.i18n.properties
Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...
- 前端系列——jquery前端国际化解决方案“填坑日记”
前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...
- layui前端框架实例（修复官网数据接口异常问题）
layui前端框架实例,官网的实例会提示数据接口异常,已修复. 主要是修改数据表格,做一个可以用的实例,可以选中,编辑,删除等. gitee地址:https://gitee.com/pingg2019 ...
- jQuery之前端国际化jQuery.i18n.properties
jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...
随机推荐
- 堆排序 && Kth Largest Element in an Array
堆排序 堆节点的访问 通常堆是通过一维数组来实现的.在数组起始位置为0的情形中: 父节点i的左子节点在位置(2*i+1); 父节点i的右子节点在位置(2*i+2); 子节点i的父节点在位置floor( ...
- CentOS7 安装dotnet sdk 2.1.401 的简单办法
1. 下载 linux版本的tar包 路径为: https://dotnet.microsoft.com/download/thank-you/dotnet-sdk-2.1.401-linux-x64 ...
- 小白学Python——Matplotlib 学习（3） 函数图形
import matplotlib.pyplot as plt import numpy as np x = np.linspace(-1,1,50) y = 2*x + 1 plt.figure() ...
- Solr安装(单机版)
本文记录的是solr在win下安装配置使用的过程,最后将solr部署到Linux上通过远程访问.下一篇文章会介绍 solr集群搭建(SolrCloud) 的安装! Solr是基于Lucene ...
- 值不能为null.参数名: viewInfo,如何解决
有蓝队网络服务器租用客户反映在一台服务器上使用数据库管理工具时弹出了如下错误 :值不能为null.参数名: viewInfo (Microsoft.SqlServer.Management.SqlSt ...
- 对Xcode菜单选项的详细探索(来自董铂然的微博http://www.cnblogs.com/dsxniubility/p/4983614.html)
本文调研Xcode的版本是 7.1,基本是探索了菜单的每一个按钮.虽然从xcode4一直用到了xcode7,但是一般都只是用了一些基础的功能,说来也惭愧.在一次偶然的机遇突然发现了“显示调用层级”的选 ...
- 2019-11-28-win10-uwp-提示-Cannot-find-a-Resource-with-the-Name-Key-找不到资源
title author date CreateTime categories win10 uwp 提示 Cannot find a Resource with the Name Key 找不到资源 ...
- JavaEE高级-Maven学习笔记
Maven简介 1.Maven是一款服务于Java平台的自动化构建工具. 2.构建: - 概念:以“Java源文件”.“框架配置文件”.“JSP”.“HTML”.“图片”等资源为“原料”,去“生产”一 ...
- 一、IIS搭建前端静态模板_资源加载问题
一.模板文件说明和效果展示 二.IIS配置模板 三.解决方案 把资源文件复制到html目录内与index.htm同级,因为我iis指定站点就是该目录.
- 10年前文章_UC3A/B 开发环境设置
大部分设置和 Z32U 交叉编译环境的配置 类似 Windows 环境 步骤二: 安装 toolchain 和mkII lite V2 的驱动 安装运行 avr32-gnu-toolchain-2.0 ...