精华内容
下载资源
问答
  • 2020-05-14 11:19:53

    各位读者好,下面我分享下 layui + thymeleaf 实现国际化 的过程中 注意事项:

     layui目前的版本还不支持国际化 ,所以我们现在做的国际化一般都是 thymeleaf 的元素去实现的。

     那我们如何 在layui 模板中 去实现国际化呢?

        注:本篇文章更多注重的是思路 。

     其实 国际化的写法就是  #{ }

    1、 页面个个标签里  一般都是   th:text="#{seller.visit.visit.visitPlan.title}"

    2、在 script  标签里   一般都是  [[#{seller.visit.visit.visitPlan.Others}]]     用 [[  #{  }  ]]  的写法  

    然后具体说下展览项目中实现方式

    弹窗模板 国际化

    在 layui ifream 模板中  新增/编辑  一般都用弹窗的方式   如果直接弹 弹框的话是不支持 thymeleaf 的 更别说 国际化了。

     所以我们就需要去 controller 用modelAndView 去转一下 以此来达到支持 thymeleaf  

    来,上菜 :

    /**
     * 跳转弹框页面--一级
     *
     * @return
     */
    @RequestMapping("/tpl/{tplUrl1}")
    public ModelAndView toTplOne(@PathVariable("tplUrl1") String url) {
        ModelAndView model = new ModelAndView();
        model.setViewName("/tpl/" +url);
        return model;
    }
    
    /**
     * 跳转弹框页面--二级
     *
     * @return
     */
     @RequestMapping("/tpl/{tplUrl1}/{tplUr2}")
    public ModelAndView toTplTwo(@PathVariable("tplUrl1") String url,@PathVariable("tplUr2") String url2) {
        ModelAndView model = new ModelAndView();
        model.setViewName("/tpl/" +url + url2);
        return model;
    }
     

    那这个时候呢 我们的弹窗页面 也可以香香的用 th:等各个属性了。

    轮到必填提示信息了

    layui 在2.50版本之后 支持  对 lay-verify="required" (这个是必填不能为空的校验)  的自定义提示  对你没听错  它来了

     自定义提示   lay-reqText=" 提示内容 "     

    回到我们国际化的问题   你会发现上面两种写法 在这里面都不能完成国际化 为什么呢?因为 layui 不支持!

     这时候 我们就要结合 thymeleaf   来完成了

     上代码 : th:attr="lay-reqText=#{login.loginAccountPrompt}"

    Other:

      layui 渲染列表数据也有好几种写法  这里针对我们遇到提出国际化思路

    图:1-1

    前端给我们的是 cols 表头的方式写的!  表头也是需要国际化的呀!

     因为我们所有页面都是这种方式写的 , 打不过 只能顺从 。 

    表头实现国际化方式:

     在页面中 引用

    <script type="text/javascript" th:inline="javascript">
         var tableColumn =[[#{validate.advertise.adName.length}]];
    </script>

    这时候  tableColumn  已经是动态中英文了。

    然后看上 图:1-1  中     title:tableColumn  就可以实现国际化了

    好啦 本次分享就结束啦 ,希望可以帮到大家。

    更多相关内容
  • layui国际化-jQuery.i18n组件

    千次阅读 2020-03-31 21:55:51
    layui国际化-jQuery.i18n组件 前言 layui是一款非常便捷的,并且是主要应用于后台管理的一款前端框架。虽然layui的功能非常强大,有很多的功能模块,但是人无完人,框架也是一样,layui并没有一个国际化的模块,这里...

    layui国际化-jQuery.i18n组件

    前言

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

    模块扩展

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

    在这里插入图片描述
    目录

    配置读取语言包的方法

    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很熟练的话看下源码就知道要修改那里了。。。

    展开全文
  • 前端国际化JS

    2018-06-04 16:04:07
    前端国际化JS文件,共有两个,一个i18n-mini-1.0.9,一个i18n-1.0.9
  • layui 分页栏国际化

    千次阅读 2020-03-12 12:11:53
    layui分页国际化 因为官方没有国际化api,所以只能修改源文件了,页面是用的JSP 1、先导入jquery国际化依赖 <script src="${base}/lib/jquery/jquery.i18n.properties.min.js"></script> <...

    layui分页国际化

      因为官方没有国际化api,所以只能修改源文件了,页面是用的JSP

     

    1、先导入jquery国际化依赖

    <script src="${base}/lib/jquery/jquery.i18n.properties.min.js"></script>

     

    <script>
        // 国际化语言(方便在js中获取)
        let language = '${lang}';
    
        $.i18n.properties({
            name: 'strings',
            path: base + '/resources/i18n/',
            mode: 'map',
            language: language,
            async: false
        });
    
        //初始化i18n函数
        function i18n(msgKey) {
            try {
                return $.i18n.prop(msgKey);
            } catch (e) {
                return msgKey;
            }
        }
    
        //获取国际化翻译值
        //console.log(i18n('user.login.username'));
    
    </script>

     

    2、新增国际化

          

     

    3、修改 laypage.js

          

     

    4、最终效果(英文随便翻译的)

      

    展开全文
  • 主要介绍了使用jQuery.i18n.properties实现js国际化,具有一定的参考价值,感兴趣的可以随小编看一看
  • Layui + jQuery.i18n 国际化实现

    千次阅读 2021-04-30 15:22:07
    虽然有很多功能强大、模块丰富,但还缺少一个国际化模块。 模块实现: 封装jquery.i18n.propertites.js 为i18n.js layui.define(["jquery"], function (exports) { "use strict"; var $ = layui.jquery; ```...

    前言

    Layui 是一套开源的模块化前端UI框架,其内部采用的是自身经典的模块化规范,并遵循原生HTML/CSS/JS开发方式,极易上手,拿来即用。虽然有很多功能强大、模块丰富,但还缺少一个国际化模块。

    模块实现

    封装jquery.i18n.propertites.js 为i18n.js

    layui.define(["jquery"], function (exports) {
      "use strict";
      var $ = layui.jquery;
      
    	```jquery.i18n.propertites.js```
    	
    	exports("i18n", $.i18n);
    });
    

    i18np.js 配置语言包方法

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

    与扩展echarts一样我们再global.js文件配置国际化然后把文件放入相对应的文件夹
    在这里插入图片描述
    文件目录
    在这里插入图片描述


    使用

    在这里插入图片描述
    在这里插入图片描述

    使用lang-ht="name" 替换该标签的innerHTML
    使用lang-pla="name" 替换该标签的placeholder
    使用lang-title="name" 替换该标签的title
    展开全文
  • 最新项目需要中英文切换,网上找的资料要么不完整,要么就是需要下载积分,由于个人比较穷,所以只能自己动手写一个layui国际化模块。。。。。。在这分享记录一下,复制粘贴即用 废话不多说,直接贴代码 1. 把...
  • i18n国际化登录页面

    2021-05-29 08:10:21
    国际化是啥,一开始我也是一脸懵逼。了解了之后才知道,原来它相当于网站的翻译按钮。毕竟世界上有很多不同的语言,不可能每个人都会中文嘛,所以它的作用就体现出来了。 国际化又被称为i18n,因为...
  • layui框架对弹框的国际化临时处理

    千次阅读 2020-03-27 09:58:04
    从我用layui这一框架开始,经历了几个项目,公司突然第一次开始有国际化的需求,项目中对国际化的需求其实也是必不可少的,很多项目所使用的语言并不仅仅只是局限于中文版本。 在网上找了好久,也并没有发现layui有...
  • <script> layui.use(['form', 'layedit', 'laydate'], function () { function isSelcet(p1) { if (p1 == "真") { return true } else { return false } };
  • layui 多文件上传带进度条踩坑

    千次阅读 2021-01-27 04:28:43
    应去掉途中的upload 代码如下 var upload layui.use(['element', 'form','layer'], function () { var id = "${id}" upload = layui.upload var element = layui.element; var xhrOnProgress = function (fun) { ...
  • 主要介绍了django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui 表格操作列按钮动态显示的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • LayUI使用中遇到的问题 & 解决办法

    千次阅读 2019-06-25 17:29:43
    LayUI 问题 & 解决 LayUI中某些插件使用需引入,如select下拉框,form表单,日期,table等!!! (1) 表格table中的问题: 1. checkbox: // 获取选中行 table.on('checkbox(test)', function(obj){ console.log(obj) }...
  • 在index主页面上写入 标签指定url home/console.html即为templates文件夹下的html文件路径 <div class="layui-logo" lay-href="home/console.html"> <span>可视系统span> div> 2.在django的app项目文件夹下的url...
  • 是一款基于Golang、Gin、Layui、MySQL等技术栈开发平台框架,拥有完善的(RBAC)权限架构和基础核心管理模块,为了缩短研发周期,系统框架集成了代码生成器,内置平台自定义研发的模板引擎,可以一键CRUD生成整个模块...
  • 是一款基于Golang、GoFrame、Layui、MySQL等技术栈开发平台框架,拥有完善的(RBAC)权限架构和基础核心管理模块,为了缩短研发周期,系统框架集成了代码生成器,内置平台自定义研发的模板引擎,可以一键CRUD生成整个...
  • LayUI

    2022-04-01 20:47:57
    LayUI 一、lauui的使用 1.引入css <script type="text/javascript" src="layui-v2.6.8/layui/layui.js"></script> 2.布局容器 1.固定宽度 <div class="layui-container" style="background-color:...
  • jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化国际化英文单词为:Internationalization,又称i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”...
  • 示例: layer.confirm(language == 'zh-CN' ? "您确定要删除吗?" : 'Are you sure you want to delete it?' ,{ btn: [language == 'zh-CN' ? "确定" : 'Submit', language == 'zh-CN' ? "取消" : 'Cancel'], ...
  • 是一款基于Golang、GoFrame、Layui、MySQL等技术栈开发平台框架,拥有完善的(RBAC)权限架构和基础核心管理模块,为了缩短研发周期,系统框架集成了代码生成器,内置平台自定义研发的模板引擎,可以一键CRUD生成整个...
  • 因开发要求需要将layui table中的中文组件部分改为英文,其它地方修改layui.js文件即可,但是跳页部分缺没找到对应中文部分 一开始想到js二次修改html的方式: var html = document.querySelectorAll('.layui-...
  • layUI笔记

    2021-02-16 19:51:46
    LayUI 是一款经典模块前端 UI 框架,我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端页面的制作变得更加简单。 二、环境搭建 2.1 下载 在官网即可完成下载 下载LayUI 2.2 导入依赖 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 629
精华内容 251
关键字:

layui国际化