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>
js
- 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-filter
title: '选项卡的标题'
,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;
}
1786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
