layui搭建后台管理页

前面Sham做v1版小程序的时候，用简单使用layui搭建后台管理页，这个周末，把框架结构重新调整了下，主要是在顶部增加了选项卡，用于放置大类，然后下面左侧树形选项卡放置大类对应的小类，界面框架上基本实现和layui官网演示的差不多了，特记录分享下。

效果图如下：

这里只放首页的代码，子页面的不放了，简单的就是首页点击选项卡之后，在首页内的iframe里直接打开对应的网址，如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>行政服务小程序-后台管理</title><link rel="stylesheet" href="../public/layui/css/layui.css"></head><body class="layui-layout-body"><!--判断是否已经登录，如果没有，跳转到登录页--><?phpsession_start();if($_SESSION['admin']!=="admin"){echo "<script>location.href='adminlogin.php';</script>";}?><!--正式页面开始--><div class="layui-layout layui-layout-admin"><!--1.头部区域--><div class="layui-header"><div class="layui-logo">行政服务小程序</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item showtab layui-this" data-id="setting"  mytitle="小程序设置"><a>小程序设置</a></li><li class="layui-nav-item showtab" data-id="staffs"  mytitle="员工管理"><a>员工管理</a></li><li class="layui-nav-item showtab" data-id="canteen"  mytitle="餐饮管理"><a>餐饮管理</a></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="d48643a96a96925336b3ab966f72d583.php?logout">退出登录</a></li></ul></div><!--2.左侧导航--><div class="layui-side layui-bg-black"  style="width:210px;"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree"  lay-filter="test"><li class="layui-nav-item layui-nav-itemed" id="setting" name="tabs"><a href="javascript:;">小程序设置</a><dl class="layui-nav-child"><dd class="leftdaohang "  data-url="usercenter.php"  mytitle="个人中心"><a>个人中心</a></dd><dd class="leftdaohang"  data-url="canteen.php"  mytitle="餐饮服务"><a>餐饮服务</a></dd></dl></li><li class="layui-nav-item layui-nav-itemed" id="staffs" name="tabs" style="display:none;"><a href="javascript:;">员工管理</a><dl class="layui-nav-child"><dd class="leftdaohang" data-url="userlist.php" mytitle="已登记员工清单"><a>已登记员工清单</a></dd><dd class="leftdaohang" data-url="upstaffinfo.php" mytitle="上传更新员工信息"><a>上传更新员工信息</a></dd></dl></li><li class="layui-nav-item  layui-nav-itemed" id="canteen" name="tabs" style="display:none;"><a href="javascript:;">餐饮管理</a><dl class="layui-nav-child"><dd class="leftdaohang" data-url="foodmenus.php" mytitle="菜单明细"><a>菜单明细</a></dd><dd class="leftdaohang" data-url="upfoodmenu.php" mytitle="上传食堂菜单"><a>上传食堂菜单</a></dd></dl></li></ul></div></div><!--3.右侧主体内容区--><div class="layui-body" style="margin-bottom:-50px;" ><!--tabs标签--><div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true"><ul class="layui-tab-title"><!-- <li class="layui-this" lay-id=""><i class="layui-icon">&#xe68e;</i> <cite>后台首页</cite></li>--></ul><div class="layui-tab-content"><!-- <div class="layui-tab-item layui-show"><iframe style='width: 100%;margin-top:0px;border:none;' height='550' src='setting/usercenter.php' ></iframe></div>--></div></div> </div></div><script src="../public/layui/layui.all.js"></script><script>//添加事件执行layui.use('element', function(){var $ = layui.jquery,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块//触发事件var active = {tabAdd: function(){//新增一个Tab项var htmlurl=$(this).attr('data-url');var mytitle=$(this).attr('mytitle');
//                  alert("触发tab增加事件："+mytitle);//先判断是否已经有了tabvar arrayObj = new Array();　//创建一个数组  $(".layui-tab-title").find('li').each(function() {var y = $(this).attr("lay-id"); arrayObj.push(y);});
//                    alert("遍历取到的数组："+arrayObj);var have=$.inArray(mytitle, arrayObj);  //返回 3,if (have>=0) {//tab已有标签
//                        alert("遍历的已有标签："+mytitle);element.tabChange('demo', mytitle); //切换到当前点击的页面} else{var h = $(window).height()-150;//没有相同tab
//                      alert("遍历的没有相同tab："+mytitle);element.tabAdd('demo', {title:mytitle //用于演,content: '<iframe style="width: 100%;height:'+h+'px;margin-top:0px;border:none;" scrolling="auto" src='+htmlurl+' ></iframe>',id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下})element.tabChange('demo', mytitle); //切换到当前点击的页面}}};//这里是实现点击竖式选项卡，执行添加$(".leftdaohang").click(function(){var type="tabAdd";var othis = $(this);
//                var htmlurl=$(this).attr('data-url');
//                var mytitle=$(this).attr('mytitle');active[type] ? active[type].call(this, othis) : '';});//这里是实现点击顶部选项卡之后，显示或隐藏对应的竖式选项卡$('.showtab').click(function(){var dataid=$(this).attr('data-id');var dataids=document.getElementById(dataid);var tabs=document.getElementsByName('tabs');$(tabs).hide();$(dataids).show();})});</script></body>
</html>

然后，自行下载layui之后，修改顶部调用css及中下部调用js的地址就可以，试试吧

layui搭建后台管理页相关推荐

【javaWeb微服务架构项目——乐优商城day03】——（搭建后台管理前端，Vuetify框架，使用域名访问本地项目，实现商品分类查询，cors解决跨域，品牌的查询）
乐优商城day03 0.学习目标 1.搭建后台管理前端 1.1.导入已有资源 1.2.安装依赖 1.3.运行一下看看 1.4.目录结构 1.5.调用关系 2.Vuetify框架 2.1.为什么要学习U ...
bootstrap搭建后台管理页面
bootstrap搭建后台管理页面管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚.其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了i ...
使用layui 做后台管理界面，在Tab中的链接点击后添加一个新TAB的解决方法
使用layui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法参考文章: (1)使用layui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法 (2)https: ...
基于layui的后台管理模板
介绍: 基于layui的后台管理模板网盘下载地址: http://kekewangLuo.cc/U6mcEZKHXpb 图片:
使用 Vue + LayUI 做后台管理、RESTful 交互
一.前言 1.之前使用了 React/Angular,使用起来显然是比 jQuery 好多了,但时隔半年,最近再次深入研究了 vue,很惊喜. 故以后选择 MVC/MVVM 框架的话,建议首选 vue ...
vue+antd搭建后台管理界面模版（PC端），适配中文、英文、日文 mock数据，开箱即用
vue+antd搭建后台管理界面模版(PC端) 完整代码下载地址:vue+antd搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES ...
使用layui框架迅速搭建后台管理页面
写在前面 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 其外在极简,却又不失饱满的内在,体积轻盈, ...
layui搭建后台管理框架
简介:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰 ...
layui搭建后台管理系统
好文章需要耐心阅读-茶凡-Matrix 首先想要使用layui搭建一个这样简洁通用的后台管理模板,需要理解后台管理系统的结构.大致可以分为三部分.
VUE搭建后台管理界面
后台管理一.前言二.依赖配置三.koa框架四.数据库五.路由六.前端界面 6.1 登录界面 6.2 注册界面 6.3 展示界面七.阿里云部署 7.1 前端项目 7.2 后端node 7. ...

layui搭建后台管理页

layui搭建后台管理页相关推荐

最新文章

热门文章