layui通用后台模板

layui官方文档 https://www.layui.com/doc/
项目路径等，引用的js及css可参考 https://blog.csdn.net/t1012665655/article/details/88528182

工作之余，非前端专业人员，参考

最基本的访问路径controller

@Controller
@RequestMapping("/layui/panel")
public class LayPanelController {@RequestMapping("/")public ModelAndView index() {ModelAndView modelAndView = new ModelAndView();modelAndView.setViewName("layui_panel");return modelAndView;  }@RequestMapping("/home")public ModelAndView homePage() {ModelAndView modelAndView = new ModelAndView();modelAndView.setViewName("home");return modelAndView;  }@RequestMapping("/list/{id}")public ModelAndView listIds(@PathVariable(value = "id") Long id) {        ModelAndView modelAndView = new ModelAndView();modelAndView.setViewName("list");modelAndView.addObject("id", id);return modelAndView;  }}

jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<title>layui面板</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo"><span class="logo_dp">通用后台</span></div><!-- 头部区域 --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item" lay-unselect=""><a href="javascript:;" title="侧边伸缩"><i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i></a></li><li class="layui-nav-item" lay-unselect=""><a href="javascript:;" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></a></li>  </ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><span>张Mr</span></li><li class="layui-nav-item"><a href="">退了</a></li></ul></div><!-- 侧边栏 --><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><ul class="layui-nav layui-nav-tree layui-nav-flex"  lay-filter="test"><li class="layui-nav-item" ><a href="javascript:;"><i class="layui-icon layui-icon-refresh-3"></i><city>申请表查询</city></a><dl class="layui-nav-child"><dd><a href="javascript:;" class="site_nav_active" lay-href="${ctx}/layui/panel/list/1">列表一</a></dd><dd><a href="javascript:;" class="site_nav_active" lay-href="${ctx}/layui/panel/list/2">列表二</a></dd><dd><a href="javascript:;" class="site_nav_active" lay-href="${ctx}/layui/panel/list/3">列表三</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-refresh-3"></i><city>解决方案</city></a><dl class="layui-nav-child"><dd><a href="javascript:;" class="site_nav_active" lay-href="${ctx}/layui/panel/list/4">列表四</a></dd><dd><a href="javascript:;" class="site_nav_active" lay-href="${ctx}/layui/panel/list/5">列表五</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a ref="javascript:;" class="site_nav_active" lay-href="${ctx}/layui/panel/list/6"><i class="layui-icon layui-icon-refresh-3"></i><city>统计</city></a></li><li class="layui-nav-item"><a ref="javascript:;" class="site_nav_active" lay-href="${ctx}/layui/panel/list/7"><i class="layui-icon layui-icon-refresh-3"></i><city>移动端</city></a></li></ul></div></div><!-- tab页 --><div class="layadmin-pagetabs" id="LAY_app_tabs"><div class="layui-tab" lay-allowClose="true" lay-filter="LAY_tabs"><ul class="layui-tab-title"><li lay-unselect=""><i class="layui-icon layui-icon-home"></i></li></ul>      </div></div> <!-- 内容主体区域 --> <div class="layui-body" id="LAY_body"><div class="layui-tab-content"><div class="layui-tab-item layui-show"><iframe src="${ctx}/layui/panel/home" class="layui-admin-iframe" scrolling="no" frameborder="0" "setHeightIF(this);" id="iframe_url"></iframe></div></div></div><div class="layui-footer">hfzhang.csc</div>
</div>
<div style="border:1px solid red;width:50px;height:50px;index:999;background-color:red;display:none;" id="tipsModel"><span><font style="color:#fff;font-size:14px;text-align:center;">人员列表</font></span>
</div>

layui.element文档对tab页面生成及使用有详细说明
tip提示
侧边栏的自适应以及收缩

layui.use('element', function(){var element = layui.element;      });layui.use('layer', function(){var layer = layui.layer;var element = layui.element;//tip提示$('.layui-side-scroll li').on('mouseenter', function(){if(isShow == false){var that = $(this);var text = $($(this).children()[0]).text();layer.tips('<span><font style="color:#fff;font-size:14px;text-align:center;">'+text+'</font></span>' , that,{tips:[2,'#23262E'],tipsMore: false,time:2000});            }});//侧边点击生成tab$('.site_nav_active').click(function(){var tabActive = $(this);var isData = false;$.each($(".layui-tab-title li[lay-id]"), function () {if ($(this).attr("lay-id") == tabActive.attr("lay-href")) {isData = true;}})if (isData == false) {active.tabAdd(tabActive.attr("lay-href"), tabActive.text());}active.tabChange(tabActive.attr("lay-href"));//更新iframe的url$(".layui-admin-iframe").attr("src",tabActive.attr("lay-href"));});//tab点击与侧边栏同步element.on('tab', function(data){var that_lay_id = $(this).attr("lay-id")console.log(that_lay_id)$.each($(".site_nav_active"), function () {if ($(this).attr("lay-href") == that_lay_id) {$(this).parent().attr("class","layui-this");}else{$(this).parent().removeClass("layui-this");}});//更新iframe的url$(".layui-admin-iframe").attr("src",that_lay_id);});var active = {tabAdd: function (url, name) {element.tabAdd('LAY_tabs', {title: name,  content: '',id: url})},tabChange: function (url) {element.tabChange('LAY_tabs', url); }};});   var isShow = true;  //检测页面宽度$(window).resize(function(){var WIDTH = $(window).width();if(WIDTH < 990){$('.layui-side.layui-bg-black').stop().animate({width: '0px'},100,function(){$('.layui-side.layui-bg-black').hide();});$('.layui-logo').stop().animate({width: '0px'},100,function(){$('.layui-logo').hide();});}else{if(isShow){$('.layui-side.layui-bg-black').stop().animate({width: '200px'},100,function(){$('.layui-side.layui-bg-black').show();});$('.layui-logo').stop().animate({width: '200px'},100,function(){$('.layui-logo').show();});}}});$('#LAY_app_flexible').click(function(){$('.layui-nav-item city').each(function(){if($(this).is(':hidden')){$(this).show();}else{$(this).hide();}});//判断isshow的状态if(isShow){$('.layui-side.layui-bg-black').width(60);$('.layui-nav-flex').width(60);//切换样式$('#LAY_app_flexible').removeClass("layui-icon-shrink-right");$('#LAY_app_flexible').addClass("layui-icon-spread-left");//头部样式$('.logo_dp').css("display","none");$('.layui-logo').width(60);$('.layui-layout-left').css('left', 40+'px');$('#LAY_app_tabs').css('left', 60+'px');//将footer和body的宽度修改$('.layui-body').css('left', 60+'px');$('.layui-footer').css('left', 60+'px');//将二级导航栏隐藏$('dd a').each(function(){$(this).hide();});$('.layui-nav-more').hide();//修改标志位isShow =false;}else{$('.layui-side.layui-bg-black').width(200);$('.layui-nav-flex').width(200);$('#LAY_app_flexible').removeClass("layui-icon-spread-left");$('#LAY_app_flexible').addClass("layui-icon-shrink-right");$('.logo_dp').css("display","block");$('.layui-logo').width(200);$('.layui-layout-left').css('left', 200+'px');$('#LAY_app_tabs').css('left', 200+'px');$('.layui-body').css('left', 200+'px');$('.layui-footer').css('left', 200+'px');$('dd a').each(function(){$(this).show();});$('.layui-nav-more').show();isShow =true;}});//iframe高度自适应function setHeightIF(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;}}};

tip:主体内容对iframe可多种生成方式
1.可直接将tab的导航页跟content主体内容包含在一块，这样以lay-filter为标识，但对tab导航后续增加其他操作不友好（个人看法）

<div class="layui-tab" lay-filter="demo"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>商品管理</li><li>订单管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">内容1</div><div class="layui-tab-item">内容2</div><div class="layui-tab-item">内容3</div></div>
</div>

element.tabAdd('demo', {      //lay-filtertitle: '选项卡的标题',content: '选项卡的内容'       //此时这块的content直接可显示，调好部分样式即可,id: '选项卡标题的lay-id属性值'
});

2.jq方式修改url的方式，这种实际可完全脱离是不是iframe了，可全部自己写主体样式与呈现方式

  $(".layui-admin-iframe").attr("src",that_lay_id);

3.可类似独立开tab导航栏，每点击左侧菜单栏即生成一个 <div class="layui-tab-item"></div>根据lay-href或lay-id与tab关联

css
部分样式

.layui-nav .layui-nav-item > a city{padding-left:10px;
}
.layui-header .layui-logo  {}
.logo_dp{display:block;
}
.layadmin-pagetabs{height: 40px;line-height: 40px;background-color: #fff;box-sizing: border-box;box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);left:200px;position: fixed;top: 58px;right: 0;z-index: 999;
}
@media screen and (max-width: 990px){.layadmin-pagetabs, .layui-layout-admin .layui-body, .layui-layout-admin .layui-footer, .layui-layout-admin .layui-layout-left {left: 0;}
}
.layui-tab{margin: 0 0;
}
.layadmin-pagetabs .layui-tab-title li:first-child .layui-tab-close, .layadmin-tabs-select.layui-nav .layui-nav-bar, .layadmin-tabs-select.layui-nav .layui-nav-more{display:none;
}
.layadmin-pagetabs .layui-tab-title li.layui-this, .layadmin-pagetabs .layui-tab-title li:hover{background-color: #f6f6f6;
}
.layadmin-pagetabs .layui-tab-title li{min-width: 0;line-height: 40px;text-overflow: ellipsis;overflow: hidden;border-right: 1px solid #f6f6f6;vertical-align: top;
}
.layadmin-pagetabs .layui-tab-title li.layui-this:after{width: 100%;border: none;height: 2px;background-color: #292B34;
}
.layadmin-pagetabs .layui-tab-title li:after{content: '';position: absolute;top: 0;left: 0;width: 0;height: 2px;border-radius: 0;background-color: #292B34;transition: all .3s;-webkit-transition: all .3s;
}.layui-tab-title .layui-this:after{position: absolute;left: 0;top: 0;content: '';width: 100%;height: 41px;border-width: 1px;border-style: solid;border-bottom-color: #fff;border-radius: 2px 2px 0 0;box-sizing: border-box;pointer-events: none;
}
.layui-tab-content{margin-top:50px;
}

layui通用后台模板相关推荐

Yii2-Admin-Theme 基于layui的通用后台模板
Yii2-Admin-Theme 基于layui的通用后台模板 Yii2基于layui的通用后台模版,实现了,用户登陆,权限管理,用户管理,密码修改等功能,可以说基本功能已经很全了,方便我们后续的二次 ...
layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法
原生的左侧导航栏代码: 所有商品列表一列表二列表三超链接解决方案列表一列表二超链接云市场发布商品自己修改的: 生源追踪生源列表学校信息工做计划学员管理学员列表考勤管理 ...
图片上传通用后台模板
图片上传通用后台模板后台通用方法 @RequestMapping(value = "singlefile",method= RequestMethod.POST)@Respons ...
轻量级的layui框架后台模板
基于layui框架与Vue.js构建,轻量不复杂简洁不简单.QAdmin 是一个轻量级的layui后台模板.主要有:用户管理.用户列表.添加用户.文章管理.栏目管理.文章管理.系统设置.网站设置.友 ...
layui管理后台模板
layui搭建的后台模板~
基于ThinkPHP6+Layui通用后台管理框架
项目介绍一款 PHP 语言基于 ThinkPhp6.x.Layui.MySQL等框架精心打造的一款模块化.插件化.高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开 ...
基于layui的开源项目LAYUI MINI后台模板
介绍: 界面足够简洁清爽,响应式且适配手机端. 一个接口几行代码而已直接初始化整个框架,无需复杂操作. 页面支持多配色方案,可自行选择喜欢的配色. 支持多tab,可以打开多窗口. 支持无限级菜单和对f ...
通用的layui框架系统管理后台模板
公司又要开始做新的项目了,这次的项目又是后台管理系统,老板说,之前的后台管理系统都是差不多的,这一次我们换个框架吧,然后抄了一下竞争公司的模板,给我发来了一张原型图,这次又多了一个新的功能,就是点击左 ...
web元件库、axure元件库、通用元件库、常用web组件、常用表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.常用web组件.常用表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴 ...

layui通用后台模板

layui通用后台模板相关推荐

最新文章

热门文章