layer t之layer tab/ztree二级菜单布局

最新推荐文章于 2024-06-28 03:45:22 发布

日进斗识

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量2k

点赞数

分类专栏： layer

本文链接：https://blog.csdn.net/z3133464733/article/details/79083994

版权

layer 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系统首页</title>
<jsp:include page="../common.jsp"></jsp:include>
<script src="custom-js/index.js"></script>
<style type="text/css">
.layui-side {
	display: inline;
	background-color: #f2f2f2;
}

.layui-layout-admin .layui-body, .layui-layout-admin .layui-footer {
	left: 0px;
}

@media screen and (min-width:768px) {
	.layui-layout-admin .layui-body, .layui-layout-admin .layui-footer {
		left: 200px;
	}
}

@media screen and (max-width: 750px) {
	.site-tree-mobile {
		display: block !important;
		position: fixed;
		z-index: 100000;
		bottom: 0px;
		left: 0px;
		width: 45px;
		height: 45px;
		line-height: 45px;
		border-radius: 2px;
		text-align: center;
		background-color: rgba(0, 0, 0, .7);
		color: #fff;
		cursor: pointer;
	}
}
</style>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header layui-anim layui-anim-scale">
			<!-- <div class="layui-logo layui-hide-sm">
				<a οnclick='' href="javascript:void(0);"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i> </a>
			</div> -->
			<ul class="layui-nav layui-hide-ms">
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> <span id="curName"></span>
				</a>
					<dl class="layui-nav-child">
						<shiro:hasPermission name="/blog/base-resource">
							<dd>
								<a οnclick="jbset();" href="javascript:void(0);">基本资料</a>
							</dd>
						</shiro:hasPermission>
						<shiro:hasPermission name="/blog/save-set">
							<dd class="layui-hide-xs">
								<a οnclick="saveset();" href="javascript:void(0);">安全设置</a>
							</dd>
						</shiro:hasPermission>
						<dd>
							<a href="/blog/logout">退出</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item layui-hide-sm"><a href="/blog/">博客首页</a></li>
				<li class="layui-nav-item layui-hide-xs"><a href="/blog/logout">退出</a></li>
			</ul>
		</div>
		<div class="layui-side layui-hide-xs changeMenuTab layui-anim layui-anim-scale" style="z-index: 999999999999999999999999">
			<jsp:include page="leftMenu.jsp"/>
		</div>
		<div class="layui-body layui-anim layui-anim-scale">
			<div class="layui-tab" lay-filter="tb_content" lay-allowClose="true" style="padding-left: 20px;">
				<ul class="layui-tab-title" id='tb_title'></ul>
				<div class="layui-tab-content"></div>
			</div>
		</div>
		<div class="site-tree-mobile layui-hide" οnclick="changeMenu();" id="changeMenu">
			<i class="layui-icon" id="btC"></i>
		</div>
		<div class="layui-footer layui-anim layui-anim-scale" style="text-align: center;">博客</div>
	</div>
</body>
</html>

var zNodes = [];
var curMenu;
var zTree_Menu;
var element;
var layer;
var setting = {
	view : {
		showLine : false,
		showIcon : showIconForTree
	},
	data : {
		simpleData : {
			enable : true,
			idKey : "id",
			pIdKey : "pId",
			rootPId : 0
		}
	},
	callback : {
		onClick : zTreeOnClick
	}
};
function showIconForTree(treeId, treeNode) {
	return !treeNode.isParent;
};
/**
 * 判断面板是否存在
 * 
 * @param treeNode
 * @returns
 */
function isExist(treeNode) {
	var tbs = [];
	$("#tb_title li").each(function(i, obj) {
		tbs.push($(this).attr('lay-id'));
	});
	var flag = $.inArray(treeNode.id, tbs);
	return flag;
}
/**
 * 添加tab面板
 * 
 * @param treeNode
 * @returns
 */
function addTab(treeNode) {
	if (isExist(treeNode) == -1) {
		var content = '<iframe id="tab_iframe'
				+ treeNode.id
				+ '"  src="'
				+ treeNode.ahref
				+ '" style="width:100%;height:500px" frameborder="0" class="layui-anim layui-anim-scale" ></iframe>';
		element.tabAdd('tb_content', {
			title : treeNode.name,
			content : content,
			id : treeNode.id
		});
	}
	element.tabChange('tb_content', treeNode.id);
	var ifreamNode = document.getElementById('tab_iframe' + treeNode.id);
	ifreamNode.contentWindow.location.reload(true);
	zTree_Menu.selectNode(treeNode);
}
/**
 * ztree 点击事件
 * 
 * @param event
 * @param treeId
 * @param treeNode
 * @returns
 */
function zTreeOnClick(event, treeId, treeNode) {
	if (treeNode.isParent) {
		curNode = treeNode.children[0];
		zTree_Menu.selectNode(curNode);
		addTab(curNode);
		return;
	} else {
		addTab(treeNode);
	}
};
// style="top: 277.5px; height: 0px; opacity: 0;"
function changeMenu() {
	$("#changeMenu").removeClass("site-tree-mobile layui-hide");
	$(".changeMenuTab").removeClass("layui-hide-xs");
	$("#btC").hide();
	layer.open({
		type : 1,
		title : false,
		offset: 'lt',
		resize:false,
		closeBtn : 0,
		anim : 5,
		scrollbar:true,
		shadeClose : true,
		end : function() {
			element.init();
			$(".changeMenuTab").addClass("layui-hide-xs");
			$("#changeMenu").addClass("site-tree-mobile layui-hide");
			$("#btC").show();
		}
	});
}
function jbset() {
	var node = zTree_Menu.getNodeByParam("id", 39);
	zTree_Menu.selectNode(node);
	addTab(node);
}
function saveset() {
	var node = zTree_Menu.getNodeByParam("id", 40);
	zTree_Menu.selectNode(node);
	addTab(node);
}
layui.define([ 'element', 'layer' ], function() {
	element = layui.element;
	layer = layui.layer;
	$.ajax({
		url : '/blog/leftmenu',
		type : 'post',
		cache : false,
		async : false,
		success : function(res) {
			zNodes = res;
		}
	});
	/**
	 * 加载menuTree
	 */
	$.fn.zTree.init($("#leftTree"), setting, zNodes);
	zTree_Menu = $.fn.zTree.getZTreeObj("leftTree");
	var nodes = zTree_Menu.getNodes();
	if (nodes.length == 0) {
		layer.alert("请联系管理员授权<基础》权限!");
	} else {
		curNode = zTree_Menu.getNodeByParam("id", 39);
		zTree_Menu.selectNode(curNode);
		/**
		 * 添加node到选中的tab
		 */
		addTab(curNode);
		/**
		 * 展开所有节点
		 */
		zTree_Menu.expandAll(true);
	}
	/**
	 * 监听tab切换
	 */
	element.on('tab(tb_content)', function() {
		var lay_id = $(this).attr("lay-id");
		var node = zTree_Menu.getNodeByParam("id", lay_id);
		zTree_Menu.cancelSelectedNode();// 先取消所有的选中状态
		zTree_Menu.selectNode(node);
		var ifreamNode = document.getElementById('tab_iframe' + lay_id);
		if (ifreamNode != null) {
			ifreamNode.contentWindow.location.reload(true);
		}
	});
	$.ajax({
		url : '/blog/getUserName',
		type : 'post',
		cache : false,
		async : false,
		success : function(res) {
			$("#curName").text(res.nickname);
		}
	});
	element.init();
});

common.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<script src="/blog/plugins/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/blog/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
<script src="/blog/plugins/layui/layui.js"></script>
<link rel="stylesheet" href="/blog/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="/blog/plugins/layui/css/layui.css">