layui中导航元素的简单使用
2024-06-11 18:15:45
整体效果图
所需界面
main.html界面代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后台管理</title><link rel="stylesheet" href="layui/css/layui.css"><script src="layui/layui.js"></script><style>/*对layui中的样式进行重写*/.layui-tab-content {padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/}.show-frame {top: 50px!important;/*默认.layui-layout-admin .layui-body {top: 60px;bottom: 44px;}*/overflow: hidden;/*消除浏览器最右边的滚动条*/}.frame {position: absolute;padding: 10px;/*与layui-footer隔开一段距离*/width: 100%;height: 100%;}</style>
</head>
<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 href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><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="">邮件管理</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 href="">控制台<span class="layui-badge">9</span></a></li><li class="layui-nav-item"><a href="">个人中心<span class="layui-badge-dot"></span></a></li><li class="layui-nav-item" lay-unselect=""><a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a><dl class="layui-nav-child"><dd><a href="javascript:;">修改信息</a></dd><dd><a href="javascript:;">安全管理</a></dd><dd><a href="javascript:;">退了</a></dd></dl></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"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">模块管理</a><dl class="layui-nav-child"><dd><a href="javascript:;" name="t1" id="1" title="科室管理" content="hospital-department.html">科室管理</a></dd><dd><a href="javascript:;" >文章列表</a></dd><dd><a href="javascript:;" >类别管理</a></dd></dl></li></ul></div></div><div class="layui-body show-frame"><div class="layui-tab layui-tab-brief" lay-allowClose="true" lay-filter="empTab"><ul class="layui-tab-title"><li class="layui-this "><i class="layui-icon"></i></li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show"><h1 style="color: #5FB878">欢迎登录医院分诊后台管理系统</h1></div></div></div></div><div class="layui-footer"><!-- 底部固定区域 -->© layui.com - 底部固定区域</div>
</div>
<script src="../src/layui.js"></script>
<script>//JavaScript代码区域layui.use('element', function(){var element = layui.element;var $ = layui.$;$("[name=t1]").click(function () {var id = $(this).attr("id");var content = $(this).attr("content");if($("li[lay-id="+id+"]").length==0){element.tabAdd("empTab",{title:$(this).attr("title"),content:"<iframe src='"+content+"' class='frame' frameborder='0'></iframe>",id:id})}element.tabChange('empTab',id)})});
</script>
</body>
</body>
</html>
hospital-department界面代码(参考代码)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>科室管理</title><link rel="stylesheet" href="layui/css/layui.css"><script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-form"><lable class="layui-form-label">科室名</lable><div class="layui-inline"><input class="layui-input" id="searchName" type="text"></div><button type="button" class="layui-btn" id="searchAnything"><i class="layui-icon"></i></button>
</div><table id="department" lay-filter="departmentTable"></table><!---------------------添加科室表格 start------------------------------->
<form class="layui-form" id="addDepartment" style="display: none;padding: 20px 30px 0 0" lay-filter="insertFilter"><div class="layui-form-item"><label class="layui-form-label">科室名称</label><div class="layui-input-inline"><input type="text" name="name" placeholder="请输入科室名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">科室电话</label><div class="layui-input-inline"><input type="text" name="telephone" placeholder="输入科室电话" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">科室位置</label><div class="layui-input-inline"><input type="text" name="area" placeholder="输入科室所在位置" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>
</form>
<!---------------------添加文章表格 end------------------------------->
<!---------------------修改文章表格 start------------------------------->
<form class="layui-form" id="updateDepartment" style="display: none;padding: 20px 30px 0 0" lay-filter="updateFilter"><div class="layui-form-item"><label class="layui-form-label">科室名称</label><div class="layui-input-inline"><input type="hidden" name="id"/><input type="text" name="name" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">科室电话</label><div class="layui-input-inline"><input type="text" name="telephone" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">科室所在区域</label><div class="layui-input-inline"><input type="text" name="area" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>
</form>
<!---------------------修改文章表格 end-------------------------------><!--===============添加、批量删除工具条 start===================-->
<script type="text/html" id="toolbar2"><a class="layui-btn layui-btn-sm" lay-event="add">添加</a><a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteMany">批量删除</a>
</script>
<!--===============添加、批量删除工具条 end ===================-->
<!--===============删除、修改工具条 start===================-->
<script type="text/html" id="toolbar1"><a class="layui-btn layui-btn-xs" lay-event="update">修改</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
<!--===============删除、修改工具条 end ===================-->
<script>layui.use(["form","layer","table"],function () {var form = layui.form;var layer = layui.layer;var table = layui.table;var $ = layui.$;table.render({elem:"#department",limit:5,limits:[5,10,15],url:"department/select.do",page:true,toolbar:"#toolbar2",cols:[[{type:"checkbox"},{field:"id",title:"科室编号"},{field:"name",title:"科室名称"},{field:"telephone",title:"科室电话"},{field:"area",title:"科室所在区域"},{title:"操作",toolbar:'#toolbar1'}]]});//---------------search start------------------$("#searchAnything").click(function () {table.reload('department',{where:{name:$("#searchName").val(),},page:{curr:1}})})//----------------search end--------------------//----------------toolbar2（表头工具条） 绑定----------------------table.on('toolbar(departmentTable)',function (obj) {//获取到table表格的idvar checkStatus = table.checkStatus(obj.config.id);console.log(obj.config.id)if(obj.event =='add'){layer.open({type:1,content:$("#addDepartment"),area:["400px","350px"],title:'添加科室'})}else if(obj.event == 'deleteMany'){var array = checkStatus.data;if(array.length == 0){layer.msg("请至少选择一个复选框",{icon:5,time:2000});return;}layer.confirm("检查一下别错删哦！",{icon:6},function () {var ids = [];for(var i=0;i<array.length;i++){ids.push(array[i].id);}$.ajax({url:"department/deleteMany.do",data:"ids="+ids,dataType:"json",success:function (data) {if(data.isDelete){layer.msg("删除成功",{icon:6,time:2000});table.reload('department')}else{layer.msg("删除失败",{icon:5,time:2000});}}})})}})//----------------------------------------------//----------------toolbar1(内容工具条) 绑定----------------------table.on('tool(departmentTable)',function (obj) {if(obj.event =='update'){$.ajax({url:"department/selectOne.do",data:"id="+obj.data.id,dataType:"json",success:function (data) {//val中填写form表单lay-Filter的值form.val('updateFilter',{id:data.id,name:data.name,telephone:data.telephone,area:data.area,})}})layer.open({type:1,content:$("#updateDepartment"),area:["400px","350px"],title:'修改'})}else if(obj.event == 'delete'){layer.confirm("确定要删除吗？",{icon:5},function (index) {var id = obj.data.id;$.ajax({url:"department/delete.do",dataType:"json",data:"id="+id,success:function (data) {if(data.isDelete){layer.msg("删除成功",{icon:1,time:2000});table.reload('department');}}})})}})//----------------------------------------------//-------------------添加按钮绑定事件 start---------------------------form.on('submit(addSubmit)',function () {$.ajax({type:"post",url:"department/insert.do",data:$("#addDepartment").serialize(),success:function (data) {if(data.isAdd){/*layer.msg("图书添加成功", {icon: 1,time:3000});*/$("#addDepartment")[0].reset();layer.confirm("添加成功,要退出添加界面吗？",{icon: 1},function (index) {layer.closeAll();})table.reload('department')}},dateType:"json"});return false;});//-------------------添加按钮绑定事件 end---------------------------//-------------------修改按钮绑定事件 start-------------------------form.on('submit(updateSubmit)',function () {$.ajax({type:"post",url:"department/update.do",data:$("#updateDepartment").serialize(),success:function (data) {console.log(data)if(data.isUpdate){layer.confirm("修改成功,要退出修改界面吗？",{icon: 1},function (index) {layer.closeAll();})table.reload('department')}},dateType:"json"});return false;});//-------------------修改按钮绑定事件 end---------------------------})
</script>
</body>
</html>
layui中导航元素的简单使用相关推荐
- php 数组重复最多,PHP获取数组中重复最多元素的简单示例
这篇文章主要为大家详细介绍了PHP获取数组中重复最多元素的简单示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧! 本文实例讲述了PHP获取数组中重复最 ...
- 怎么设置php 中小窗口浮动,CSS_闭合浮动元素超级简单的方法，无意中看到的一个非常不错的 - phpStudy...
闭合浮动元素超级简单的方法 无意中看到的一个非常不错的小技巧.是关于用CSS处理闭合浮动元素的方法,收藏了. 关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去ol ...
- 为什么简单的删除集合中的元素竟然报错了？
作者 | 七十一 来源 | 程序员巴士 前言 什么是快速失败:fail-fast 机制是java集合(Collection)中的一种错误机制.它只能被用来检测错误,因为JDK并不保证fail-fast ...
- 【周赛-简单】5488. 使数组中所有元素相等的最小操作数
存在一个长度为 n 的数组 arr ,其中 arr[i] = (2 * i) + 1 ( 0 <= i < n ). 一次操作中,你可以选出两个下标,记作 x 和 y ( 0 <= ...
- Element 对象表示 XML 文档中的元素。
Element 对象 Element 对象表示 XML 文档中的元素.元素可包含属性.其他元素或文本.如果元素含有文本,则在文本节点中表示该文本. 重要事项:文本永远存储在文本节点中.在 DOM 处理 ...
- layui中laydate兼容ie_layui菜鸟教程--乐字节前端
主要内容 LayUI 的介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 由国人开发,16年出厂 ...
- 快速了解layui中layer的使用
这两天写项目的时候用到layer,于是又把layui找出来看了看,layui确实是一个比较强大的前端框架,里面涵盖了很多的前端元素,而这对于前端的开发者来说是省了很大的麻烦,从一些页面元素到内置模块, ...
- LayUI中的基本元素之 日期和时间组件文档
前言 最近在准备找工作的事项,但是作为一个后台也是需要了解一些前端框架的.就目前的来说有大火的VUE,但是VUE还是存在一定的学习成本,所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手, ...
- 浮动、导航条和简单布局
一.浮动 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
最新文章
- 5G 信令流程 — MM 定时器
- antd4 table里面表单赋值_vue的组件化——table表格的封装
- 如何零基础入门FPGA？这篇文章让你吃透！
- centos下防火墙设置
- Java8特性解决空指针问题
- 学习Javascript的书籍（转）
- python控制台进度条_python在控制台输出进度条的方法
- 基于springboot+LayUI的校园信息发布平台
- 关于分卷压缩文件打不开的问题
- 搜索引擎：获取并处理mdx英汉词典文件为数据库
- Protues闪退解决办法
- 卓有成效的管理者(笔记)——我能贡献什么
- ghost系统好，还是原版安装的好！！！！？？？？？？？？？？？？
- Simulink电力电子仿真01
- Win10安装ST-Link驱动
- 企鹅龙drbl+再生龙clonezilla 自动化实践剖析
- 高数_第4章曲线积分和曲面积分_弧长的曲线积分的性质
- 饿了么（elementUI）组件库如何在vue项目中使用？
- 主成分分析(PCA)-Python代码
- 【干】探索自己的云米冰箱-2