|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%> // 页面编码为UTF-8，确保中文等字符显示正确
|
|
|
|
|
|
<!DOCTYPE html> // 定义文档类型为HTML5
|
|
|
<html lang="en"> // 开始HTML文档，指定语言为英语
|
|
|
<head>
|
|
|
<meta charset="UTF-8"> // 定义文档的字符编码为UTF-8
|
|
|
<title>系统管理员</title> // 页面标题，显示在浏览器标签上
|
|
|
<!-- layui -->
|
|
|
<link rel="stylesheet" href="../public/layui/css/layui.css"> // 引入layui的CSS文件，用于页面样式
|
|
|
<script src="../public/layui/layui.js"></script> // 引入layui的JavaScript文件
|
|
|
</head>
|
|
|
<body class="layui-layout-body"> // 定义页面主体部分，应用layui的布局样式
|
|
|
<div class="layui-layout layui-layout-admin"> // layui框架的布局容器，管理后台使用
|
|
|
<div class="layui-header"> // 头部区域
|
|
|
<div class="layui-logo">系统管理员</div> // 左侧logo，显示为“系统管理员”
|
|
|
<!-- 头部区域（可配合layui已有的水平导航） -->
|
|
|
<ul class="layui-nav layui-layout-left"> // 头部导航栏（左侧）
|
|
|
<li class="layui-nav-item"><a href="">首页</a></li> // 首页导航项
|
|
|
<li class="layui-nav-item"> // 其他系统菜单
|
|
|
<a href="javascript:;">其它系统</a>
|
|
|
<dl class="layui-nav-child"> // 下拉菜单
|
|
|
<dd><a href="../reader/04readerFrame.jsp">图书馆首页</a></dd> // 图书馆首页
|
|
|
<dd><a href="../loginManager.html">图书管理员</a></dd> // 图书管理员链接
|
|
|
</dl>
|
|
|
</li>
|
|
|
</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"> // 用户头像
|
|
|
系统管理员 // 用户名
|
|
|
</a>
|
|
|
<dl class="layui-nav-child"> // 下拉菜单
|
|
|
<dd id="updatePassword"><a href="javascript:;">修改密码</a></dd> // 修改密码项
|
|
|
</dl>
|
|
|
</li>
|
|
|
<li class="layui-nav-item"><a href="./logOut">退出</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="test"> // 使用layui的树形导航
|
|
|
<li class="layui-nav-item layui-nav-itemed"> // 书籍管理菜单项，已选中
|
|
|
<a class="" href="./booklist.jsp" target="content"><i class="layui-icon layui-icon-read" style="font-size: 16px; color: #1E9FFF;"></i> 书籍管理</a> // 书籍管理菜单项
|
|
|
</li>
|
|
|
<li class="layui-nav-item layui-nav-itemed"> // 书籍类型管理菜单项，已选中
|
|
|
<a class="" href="./sortlist.jsp" target="content"><i class="layui-icon layui-icon-tabs" style="font-size: 16px; color: #1E9FFF;"></i> 书籍类型</a> // 书籍类型菜单项
|
|
|
</li>
|
|
|
<li class="layui-nav-item"> // 借阅证管理菜单项
|
|
|
<a href="./cardlist.jsp" target="content"><i class="layui-icon layui-icon-template-1" style="font-size: 16px; color: #1E9FFF;"> </i>借阅证管理</a> // 借阅证管理菜单项
|
|
|
</li>
|
|
|
<li class="layui-nav-item"><a href="./borrowlist.jsp" target="content"><i class="layui-icon layui-icon-chart-screen" style="font-size: 16px; color: #1E9FFF;"></i> 借阅信息查询</a></li> // 借阅信息查询菜单项
|
|
|
<li class="layui-nav-item"><a href="./rulelist.jsp" target="content"><i class="layui-icon layui-icon-file-b" style="font-size: 16px; color: #1E9FFF;"> </i>借阅规则管理</a></li> // 借阅规则管理菜单项
|
|
|
<li class="layui-nav-item"><a href="./managerlist.jsp" target="content"><i class="layui-icon layui-icon-group" style="font-size: 16px; color: #1E9FFF;"></i>图书管理员管理</a></li> // 图书管理员管理菜单项
|
|
|
<li class="layui-nav-item"><a href="./librarydata.jsp" target="content"><i class="layui-icon layui-icon-windows" style="font-size: 16px; color: #1E9FFF;"> </i>系统管理</a></li> // 系统管理菜单项
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-body"> // 页面内容区域
|
|
|
<!-- 内容主体区域 -->
|
|
|
<iframe src="librarydata.jsp" name="content" height="100%" width="100%" frameborder="0" scrolling="no"></iframe> // 嵌套iframe，加载系统管理页面内容
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-footer"> // 底部区域
|
|
|
<!-- 底部固定区域 -->
|
|
|
© 图书管理系统 // 底部版权声明
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
// JavaScript代码区域
|
|
|
layui.use(['element', 'jquery', 'layer'], function(){ // 使用layui的模块，包括element（元素模块）、jquery和layer（弹层模块）
|
|
|
$ = layui.jquery; // 引入jQuery
|
|
|
var element = layui.element // 获取layui的element模块，用于操作元素
|
|
|
$ = layui.jquery; // 重新声明jQuery，防止覆盖
|
|
|
var form = layui.form // 获取layui的form模块，用于表单操作
|
|
|
,layer = layui.layer; // 获取layui的layer模块，用于弹层操作
|
|
|
|
|
|
$("#updatePassword").click(function(){ // 点击“修改密码”时触发
|
|
|
layer.open({ // 打开一个新的层
|
|
|
title: '修改密码', // 层的标题
|
|
|
type: 2, // 类型为iframe嵌入页面
|
|
|
area: ['300px', '300px'], // 层的宽高
|
|
|
maxmin: true, // 可以最大化和最小化
|
|
|
shadeClose: true, // 点击遮罩关闭
|
|
|
content: 'updatePassword.jsp' // 层内加载的内容页面
|
|
|
})
|
|
|
})
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
