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;
}
