如何用轻量级前端框架 LayUI 实现动态切换的选项卡及内嵌 iframe (包含完整源代码示例)
最编程
2024-02-23 14:49:19
...
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<%@ include file="common/static.jsp"%>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">OA会议系统</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<!-- <ul class="layui-nav layui-layout-left">
移动端显示
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
lay-header-event="menuLeft"><i
class="layui-icon layui-icon-spread-left"></i></li>
Top导航栏
<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item"><a href="javascript:;">nav
groups</a>
<dl class="layui-nav-child">
<dd>
<a href="">menu 11</a>
</dd>
<dd>
<a href="">menu 22</a>
</dd>
<dd>
<a href="">menu 33</a>
</dd>
</dl></li>
</ul> -->
<!-- 个人头像及账号操作 -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;"> <img
src="${pageContext.request.contextPath }/static/images/user/小黑子索隆.jpg"
class="layui-nav-img">我的
</a>
<dl class="layui-nav-child">
<dd>
<a href="">修改信息</a>
</dd>
<dd>
<a href="">安全管理</a>
</dd>
<dd>
<a href="login.jsp">退出登录</a>
</dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;"> <i
class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script>
var element,layer,util,$;
layui.use(['element', 'layer', 'util','jquery'], function(){
element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.jquery;
$.ajax({
url: " Permission.action?methodName=listmenu",
type: 'post',
dataType: 'json',
success: function(data) {
//定义一个变量将回显的数据进行拼接，最终追加到指定标签上
var str='';
$.each(data,function(i,n){
str+='<li class="layui-nav-item layui-nav-itemed">';
str+=' <a class="" href="javascript:;">'+n.text+'</a>';
//判断有无children节点有就遍历
if(n.hasChildren){
//有children节点拿到children节点
var children=n.children;
str+='<dl class="layui-nav-child">';
$.each(children,function(idx,node){
str+='<dd><a href="javascript:;" onclick="opedTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
})
str+='</dl>';
}
str+='</li>';
})
//将拼接内容追加到指定ul标签
$("#menu").html(str);
//渲染ul标签
element.render('menu');
}
})
});
//点击左侧列表右侧选项卡打开
function opedTab(title, content, id) {
//判断是否已经打开
var node=$('li[lay-id="'+id+'"]');
//没有找到该标签时就打开
if(node.length==0){
//因为element没有获取到所有要去上面扩大权限
element.tabAdd('demo', {
title : title,
content :"<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",
id : id
})
}
//有该标签就打开
element.tabChange('demo', id)
}
</script>
</body>
</html>