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

最新推荐文章于 2024-06-22 11:03:07 发布

Charles_Sir

最新推荐文章于 2024-06-22 11:03:07 发布

阅读量1.9w

点赞数 5

分类专栏： i18n 前端国际化实例文章标签： i18n 前端国际化实例 html

本文链接：https://blog.csdn.net/kmonarch/article/details/82892389

版权

前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

i18n

1 篇文章 0 订阅

订阅专栏

国际化

1 篇文章 0 订阅

订阅专栏

在今日的需求中需要利用 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

关注

5
点赞
踩
27

收藏

觉得还不错? 一键收藏
13
评论
i18n实现前端国际化(实例)

在今日的需求中需要利用 i18n 这个框架来实现前端的国家化操作，下图是实现效果：点击选择框实现网页上语言的切换：下面开始实现过程：所需工具：- jquery-3.3.1.js 下载地址：jquery- jquery.i18n.properties.js jquery.i18n.properties.js搭建项目目录如下：其中：language.js 为自定义的 ...
复制链接

扫一扫

专栏目录