layui国际化-jQuery.i18n组件

layui国际化-jQuery.i18n组件

前言

layui是一款非常便捷的,并且是主要应用于后台管理的一款前端框架。虽然layui的功能非常强大,有很多的功能模块,但是人无完人,框架也是一样,layui并没有一个国际化的模块,这里我们是吧jQuery的i18n集成到了layuiadmin.

模块扩展

与扩展echarts一样我们再config.js文件配置国际化然后把文件放入相对应的文件夹

layui国际化-jQuery.i18n组件_第1张图片
layui国际化-jQuery.i18n组件_第2张图片

配置读取语言包的方法

layui.define(['i18n','jquery'],function (exports) {
			var i18n=layui.i18n
				,$=layui.jquery;
				
				i18n.properties({
						name: 'layui', // 资源文件名称
						path: '../dist/i18n/', // 资源文件所在目录路径
						mode: 'map', // 模式:变量或 Map 
						language: lang, // 对应的语言
						cache: false,
						encoding: 'UTF-8',
						callback: function () {
						//这里是我通过对标签添加选择器来统一管理需要配置的地方
							$("[lang-title]").each(function (e) {
								$(this).attr("title",i18n.prop('lang_title_'+$(this).attr("lang-title")));
							})
							$("[lang-pla]").each(function (e) {
								$(this).attr("placeholder",i18n.prop('lang_pla_'+$(this).attr("lang-pla")));
							})
							$("[lang-ht]").each(function (e) {
									
								console.log(i18n.prop('lang_ht_'+$(this).attr("lang-ht")));
								$(this).html(i18n.prop('lang_ht_'+$(this).attr("lang-ht")));
							})
						}
				})
			}),exports("i18np", {})		
				
}); 

使用

在需要用到国际化的面页加载此js模块

layui.use('i18np', layui.factory('i18np'));

table模块与laypage里面固定的文字需要通过修改源码,其实改动不大(这里直接贴图)

layui国际化-jQuery.i18n组件_第3张图片
layui国际化-jQuery.i18n组件_第4张图片
如果layui很熟练的话看下源码就知道要修改那里了。。。

你可能感兴趣的:(i18n)