精华内容
下载资源
问答
  • 1.静态文件路径配置 application-dev.yml配置文件添加静态资源访问路径: #设置静态资源路径,多个以逗号分隔 ...下载文件,将官网下载的layui文件放到static文件内。 从开源项目[https://gitee.com/Leytton/lay

    1.静态文件路径配置

    application-dev.yml配置文件添加静态资源访问路径:

    #设置静态资源路径,多个以逗号分隔
    spring.resources.static-locations: classpath:static/,file:static/,classpath:templates/
    

    2.静态资源添加

    Layui官网 https://www.layui.com/ 下载文件,将下载的layui文件放到static文件夹。

    从开源项目 https://gitee.com/Leytton/layTabPlus 获取layTabPlus.js文件放到js文件夹下,index.html文件放到templates目录下。
    在这里插入图片描述

    3.登录首页

    在这里插入图片描述

    整合完成。

    展开全文
  • var CURRLINK //声明变量 window.onload = function(){ initFram() } function initFram(){ //右键菜单 var menu = document.getElementById("menu"); var dgBcn = document.getElementsByClassName...
    var CURRLINK    //声明变量
    window.onload = function(){
           initFram()
       }
    function initFram(){
       //右键菜单
       var menu = document.getElementById("menu");
       var dgBcn = document.getElementsByClassName('iframeurl')
           for (var i = 0; i < dgBcn.length ; i++) {
               dgBcn[i].oncontextmenu = function () {
                   var e = e || window.event;
                   var oX = e.clientX;
                   var oY = e.clientY;
                   menu.style.display = "block";
                   menu.style.left = oX + "px";
                   menu.style.top = oY + "px";
                   CURRLINK = $(this).data('url');
                   return false;
               }
           }
       menu.onmouseleave = function(e){
          var e = e || window.event; //是为了更好的兼容IE浏览器和非ie浏览器。
          menu.style.display = "none";
       }
       menu.onclick = function(e) {
          var e = e || window.event;
          e.cancelBubble = true;
          menu.style.display = "none";
       }
    }
    /**
     * 右键菜单打开页面
     */
    function rclick(){
       window.open(CURRLINK,"channelmode=yes");
    }
    展开全文
  • 在选项卡容器div加上lay-allowclose="true"可实现

    在选项卡容器div加上lay-allowclose="true"可实现

    展开全文
  • layui下的登录页首页

    2020-04-28 15:51:13
    使用layui框架,登录页,菜单页和首页,自动生成菜单(三级),首页自动生成echart图(饼状图,柱状图和折线出),自动弹出公告框
  • 将顶部高度修改为50px,如果有朋友感觉还是原来的高度更好,请将index.css文件中最底部的4行...【以后主要侧重组件开发和功能优化,由于能力有限,请大家多多担待】框架采用最新的layui2.x进行对1.0版本的重写,完...

    将顶部高度修改为50px,如果有朋友感觉还是原来的高度更好,请将index.css文件中最底部的4行样式去掉即可,有注释

    郑重提示:由于后期会对此框架进行多次开发,基本上修改的是大框架,所以强烈不建议对index.js/bodyTab.js进行修改,以便后期的更新能够直接覆盖升级。【以后主要侧重组件开发和功能优化,由于能力有限,请大家多多担待】

    框架采用最新的layui2.x进行对1.0版本的重写,完全不同于1.0版本的模版,不能覆盖升级

    由于本人对设计和色差之类的不太感冒,所以一些布局和颜色搭配不是太完美,在此跟大家说声抱歉,大家可以根据自己的喜好进行一些调整。

    新增“系统日志”、“会员等级”、“图标管理”、“使用文档”等页面,新增“功能设置”、“清除缓存”、“编辑文章”等功能。

    由于后期将会整合layIM,所以将原有的“消息”页面删除了,虽然会整合layIM,但是不会提供layIM的下载,如果有需求的朋友可以去进行layIM的授权 获取LayIM授权

    删除天气组件【感觉没什么作用,如果需要的可以自行去“心知天气”或另外的第三方组件中设置添加】

    由于项目是响应式,但是table不支持响应式,所以拖动浏览器改变分辨率的情况table可能展示不太友好,之前用window.resize()方法实现了托动改变大小,但是发现每拖动1px就会请求一次接口,所以舍弃了这个方法

    对搜索模块的位置进行了调整【后面小版本中会提供搜索跳转/打开新窗口功能】

    由于数据表格的分页、搜索、添加、删除等一系列数据操作需要接口的配合,同时大家都了解这是一套纯前端模版,没有后台,所以这些操作都没有了。有人提议用js动态截取json去实现动态效果,这样当然可以,但是身为一个有严重洁癖的码农,如何能忍受这样的情况?所以这些就需要大家在实际使用中根据接口传参实现了。

    重构页面图标【由于layui2.0新增了许多图标,所以对原有的图标进行了重构,避免图标冗余。实际使用中建议自己去阿里图标库挑选符合网站风格的进行替换】

    优化刷新当前页面,关闭其他,关闭全部等按钮造成的bug

    增加顶部一级菜单用以实现三级菜单,并实现响应式。可以通过更改浏览器的分辨率并且点击顶部菜单来查看效果,这个功能做了一天多啊【后面的小版本会对此功能进行优化,即增加反向定位功能】

    对90%以上的页面进行了样式优化和微调,使其更加完美【对于有强迫症的我来说,有一点瑕疵都是不能容忍的】

    由于模版中的动态操作基本都是通过缓存完成的,所以为了避免缓存过多造成卡顿现象,增加“清除缓存”按钮

    添加自定义是否开启Tab缓存【即刷新页面后是否重新打开刷新前的窗口】、是否切换窗口刷新页面、单一登录等功能。【在功能设定弹窗中设置,在移动端已隐藏此功能】功能其实早就有朋友提出来过,一直没有想到好的方式添加,直到larry的模版出来,感觉方式不错,借鉴了一下他的这种模式,在此对larry表示感谢

    优化更换皮肤在升级为2.x版本后无效的问题【后期会针对此功能进行深入优化,在移动端已隐藏此功能】

    优化“点赞、码云、github”链接。【之前虽然也有模版下载链接按钮,不知道是不明显还是什么,总有人私聊我要源码,这次我把按钮改大点,如果你们再看不到,那就不是不明显了。。。】

    优化“个人资料”页面,修改布局和响应式展示样式,重写地区三级联动效果【已封装成模块】,代码更简洁。【由于静态数据不能通过post方式提交,否则会报405、500错误,所以为了演示,将请求方式修改成了get,在实际使用中请将userInfo.js中的第13行删除,有注释】

    重做404页面、登录页面,增加动画效果。闪瞎你的钛合金眼。

    新增“图标管理”页面,用于展示引入的第三方图标文件。可点击复制class到想要的地方

    新增“使用文档”页面,详细描述了模版中封装模块的各个功能,让使用者更加了解封装的模块的功能。

    通过减少列来使table在移动端保持正常显示。需要列足够少,控制在2-3列最好。只需要给在移动端不显示的td添加pc属性即可,如

    此单元格在移动端不显示。如果还是理解不了请查看“系统基本参数”页面或者“使用文档”页面

    全面优化缓存机制,例如只要在“个人资料”页面修改过头像,那其他有头像的地方都会展示修改后的头像;修改“系统基本参数”后刷新页面底部版权修改等【当然这个功能在实际开发中就是个鸡肋,没有什么实际用处,在此处我只是想做个功能展示,毕竟这套模版是不包含后台的】

    “文章列表”页面新增文章编辑功能和预览,另外优化了搜索功能【编辑和优化功能都需要接口配合,预览功能需要前后台配合】

    重做“添加文章”页面,使其更加适合实际开发中使用【当然这是我以为的,在实际使用中肯定还差很多功能,后面会慢慢完善】编辑器由于本身的问题,点击列表中的编辑按钮有时会赋不上值,请暂时无视,等到layedit重写后重做

    “图片管理”页面新增“上传新图片”和“图片展示【即layer.photo】”功能。【由于弹层的展示获取的是接口中的数据,所以弹层不会展示新上传的图片,当然实际开发中不会有这个问题】

    展开全文
  • LayUi超级好用的前端工具

    千次阅读 2019-06-01 17:20:00
    日期:https://www.layui.com/laydate/ LayUi 首页地址:https://www.layui.com/ 转载于:https://www.cnblogs.com/YUJIE666/p/10960277.html
  • layUI笔记

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

    2020-09-11 20:42:18
    在官网首页,可以很方便的下载ayUI LayUl是一款经典模块化前端UI框架,我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端页面的制作变得更加简单。 二、环境搭建 2.1下载 在官网即可完成...
  • 效果: 刚看了下layui的文档才逐渐对其了解,之前的目录是一片混乱。 当前的目录结构: layuilayui的目录,js/modules是自己的js路径.... title>首页title> meta name="renderer" conten
  • Layui 特效

    2019-04-08 17:59:39
    layui 做项目,记录一些容易忘掉的知识点 1. 如果想在首页点击按钮弹出登入的 iframe , ajax 提交表单后,自动关闭这个iframe var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的...
  • 利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传...1、进入layui首页,下载整个组件 2、下载完成后,把名字为layui的文件夹放...
  • layui后台管理页面 首页简单搭建

    千次阅读 2018-12-19 15:04:43
    layui后台管理页面 Huang BaoKang 控制台 商品管理 其他系统 邮件管理 消息管理 授权管理 Huang BaoKang 基本资料 安全设置 基本元素 表格 表单 导航栏 组件 Navbar Tab OneLevel app.js主入口 表格 表单 首页 首页...
  • 万事开头难,昨天一直在构思用户权限管理系统怎么实现,实现哪些需求,采用什么技术...想着先使用LayUI实现左侧导航栏右侧上面Tab选项下面显示内容的系统首页,由于之前也没用过LayUI框架,昨天搞到2点多也没搞出来...
  • layui实现登录

    2019-03-29 16:47:00
    一、layui简介 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。...你可以在LayUI官网首页下载到 layui 的最新版,它经过了自动化...
  • layui的引用

    2019-01-20 23:06:00
    使用步骤:在后台首页index.html下引入layui.js和layui.css <script type="text/javascript" src="layui-v2.4.5/layui/layui.all.js"></script>然后在html下写以下脚本 <script> layui.use(...
  • 在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = layui.layer , $ = layui.jquery; }) </scri...
  • Layui框架引入

    2020-07-11 07:41:10
    使用步骤:在后台首页index.html下引入layui.js和layui.css 然后在html下写以下脚本 <script> layui.use("options",function(){}); </script> 第一个参数是一个数组,是使用哪些模块,例如,[‘form’,...
  • layui 使用

    2019-09-22 04:08:41
    1.下载后解压如图 2.示例 home.thml代码 <!DOCTYPE html><html><!-- head --><head> <meta charset="utf-8">...首页</title> <meta name="renderer"...
  • 如果使用 laravel 默认的 paginate 在layui的样式 :在laravel 页码输出中 可以自定义 模板自定义 样式:@if($paginator->hasPages()){{--PreviousPageLink--}}@if($paginator->onFirstPage())首页@...
  • layui-字体图标

    2017-04-18 17:51:00
    layui官网首页-下载:http://www.layui.com/ layui-字体图标-官方网站:http://www.layui.com/doc/element/icon.html Layui的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以...
  •  最近写项目遇到一个问题,就是使用vue里的layui.laypage.render 分页时,刷新首页会只有一页,但后台传来的数据是有50多页的,所有的数据也都一一对应,调了好久debug,终于发现了一个地方:layui.laypage.render ...
  • vue 中使用 layui

    2020-07-18 10:51:36
    解决办法 : 去 layui 官网首页 下载文件包 . 2. 拖动 : 将下载的文件包解压后 , 把整个解压文件夹拖到 vue 项目的静态资源文件夹 ( piblic 或 static ) 里 . 拖到其它位置会报错 error 'layui' is not defined no-...
  • LayUI初识与入门

    2020-08-09 22:51:32
    在官网首页,可以很方便的下载LayUI LayUI 是一款经典模块化前端 UI 框架,我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端页面的制作变得更加简单。 二、页面元素 2.1 布局 响应式栅格...
  • layui快速上手教程

    2021-01-21 21:13:54
    你可以在我们的 官网首页 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下: codelayui.code ├─css //css目录 │ │─modules //模块css目录(一般如果模块相对较大,我们会单独...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 219
精华内容 87
关键字:

layui首页