index.html内容:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>门户测试自研平台</title>
<!-- 请使用自己本文件目录 -->
<link href="layui/css/layui.css" rel="stylesheet">
<script th:src="layui/layui.js" charset="utf-8"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">门户测试自研平台</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a>控制台</a></li>
<li class="layui-nav-item"><a>商品管理</a></li>
<li class="layui-nav-item"><a>用户</a></li>
<li class="layui-nav-item">
<a>其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a>
<img th:src="@{/img/head.png}" class="layui-nav-img">
吴沪欢3
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="navLeft">
<li class="layui-nav-item layui-nav-itemed">
<a>常用功能</a>
<dl class="layui-nav-child">
<!-- date-url和href意思类似 -->
<dd><a data-id="1" href="holler.html" target="content_iFrm">课程订单</a></dd>
<dd><a data-id="2" href="kei.html" target="content_iFrm">学员信息</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a>数据分析</a>
<dl class="layui-nav-child">
<dd><a>收入报表</a></dd>
<dd><a>学员分布图</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a>发布计划</a>
<dl class="layui-nav-child">
<dd><a>收入报表</a></dd>
<dd><a>学员分布图</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a>发布商品</a>
<dl class="layui-nav-child">
<dd><a>收入报表</a></dd>
<dd><a>学员分布图</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body" style="height: 100%">
<!-- 内容主体区域 -->
<iframe name="content_iFrm" frameborder="no" border="0" class="larry-iframe"
style="width: 100%;height: 100%;" src=""></iframe>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
<div class="layui-anim layui-anim-fadein">© layui.com - 底部固定区域</div>
<i class="layui-icon layui-icon-username" style="font-size: 30px; color: #1E9FFF;"></i>
</div>
</div>
<!-- js核心份 -->
<script type="text/javascript">
layui.use(['element','layer','jquery'], function(){
var element = layui.element;
var $=layui.$;
$('dd>a').on('click',(function () {
$("iframe").attr("src",$(this).attr("href"));
});
});
});
</script>
<style>
.layui-tab-title {
border: none;
}
.layui-tab-title li {
background-color: #eeeeee;
margin-left: 10px;
}
.layui-tab-title .layui-this {
background-color: #009688;
color: white;
}
.layui-tab-title .layui-this:after {
content: none;
}
</style>
</body>
</html>
holler.html内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>你好!</h1>
<h1>你好!</h1>
<h1>你好!</h1>
<h1>你好!</h1>
<h1>你好!</h1>
<h1>你好!</h1>
</body>
</html>
kei.html内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>小问题</h1>
<h1>小问题</h1>
<h1>小问题</h1>
<h1>小问题</h1>
</body>
</html>
接下来讲一下几个核心部分缺一不可
在父标签中上加上lay-filter="***"内容视情况而定
lay-filter它的主要作用是监听表格的各种事件,例如:单元格的编辑、单元格单击、行单击、复选框选中、工具栏按钮单击等
href="holler.html"表示要跳转哪个界面
target="content_iFrm"表示要把界面跳转到哪里或者说给谁
<iframe name="content_iFrm" frameborder="no" border="0" class="larry-iframe"
style="width: 100%;height: 100%;" src=""></iframe>
name="content_iFrm"用于接收target="content_iFrm"
例如:
js部分:
layui.use(['element','layer','jquery'], function(){
var element = layui.element;//获取layui的element
var $=layui.$;//获取layui的自带的jquery
$('dd>a').on('click',(function () {//表示给dd标签下的a标签设置click事件
$("iframe").attr("src",$(this).attr("href"));//给iframe元素添加src属性,属性值为a标签的href属性的值
});
});
});
<script type="text/javascript">
layui.use(['element','layer','jquery'], function(){
var element = layui.element;//获取layui的element
var $=layui.$;//获取layui的自带的jquery
$('dd>a').on('click',(function () {//表示给dd标签下的a标签设置click事件
$("iframe").attr("src",$(this).attr("href"));//给iframe元素添加src属性,属性值为a标签的href属性的值
});
});
});
</script>