后台系统中关于左侧导航的制作

最新推荐文章于 2020-11-28 21:53:32 发布

刘家小婉

最新推荐文章于 2020-11-28 21:53:32 发布

阅读量1.2k

点赞数

分类专栏：系统管理

本文链接：https://blog.csdn.net/gali_geigei/article/details/85243348

版权

本文介绍了后台系统中使用iframe实现左侧导航的细节。通过jsp和jquery，点击导航时仅切换iframe内容，保持header和footer不变，同时解决iframe自适应高度问题，避免滚动条混乱。在登录后默认页面上，通过include引入公共组件，并通过js控制导航选中和内容切换。作者还表达了对其他无刷新导航实现方式的探索兴趣。

摘要由CSDN通过智能技术生成

iframe分块引入代码

后台系统通常的布局是
1、header头部（包含网站Logo和名称，用户名，退出，消息）
2、leftNav左侧导航（有些需要根据权限不同用户显示不同的导航）
3、footer脚部门，显示copyright或者联系我们等信息
4、content主要内容部门
点击左侧导航动态切换到对应的页面。对于手头上用的项目，没有使用react和vue或者angular等框架，就用的是基本的jsp页面+jquery库+手写样式。

需求：

点击左侧导航，进入对应页面，头部、左侧导航和脚部门不刷新；
iframe自适应页面高度，避免出现多个滚动条

代码实现

用户登录系统后，默认进入的欢迎页面作为页面框架，通过jsp的include标签引入公共的头部jsp，导航jsp（渲染出来后台根据权限返回的左侧导航列表），主体内容用iframe引入。在该页面增加js控制：点击左侧的导航，动态替换iframe的src属性来切换显示，并为当前选中导航设置选中状态。

// 
<%@ page contentType="text/html;charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/include.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>欢迎登录</title>
	<link rel="stylesheet" href="${rootUrl}css/style1.css" />
	<link rel="stylesheet" href="${rootUrl}css/enterpriseList.css" />
</head>
<body>
<!-- 主体内容区域 -->
<!-- 公共头部 -->
<%@ include file="/WEB-INF/jsp/header.jsp"%>
<div class="main clearfix">
	<!-- 公共左侧导航 -->
	<%@ include file="/WEB-INF/jsp/leftMenu.jsp"%>

最低0.47元/天解锁文章

刘家小婉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后台系统中关于左侧导航的制作

iframe分块引入代码后台系统通常的布局是1、header头部（包含网站Logo和名称，用户名，退出，消息）2、leftNav左侧导航（有些需要根据权限不同用户显示不同的导航）3、footer脚部门，显示copyright或者联系我们等信息4、content主要内容部门点击左侧导航动态切换到对应的页面。对于手头上用的项目，没有使用react和vue或者angular等框架，就用的是基...
复制链接

扫一扫

专栏目录