手写后台管理框架模板（一）
引言：前些时间小刘总想自己写个属于自己的后台管理模板，不必再去网上找框架结合。现在小刘抽空写了个简易的模板版本1.0接下来有时间再进行优化。
后台管理框架主页一般有头部用户以及系统信息，左边大多是菜单栏，右边为内容展现区。右边又可能分为上下两部分，一部分为标签页选项卡，一部分为内容区域；
主要思路如下：
1.点击左边菜单右边内容显示，同时内容上方出现相应的标签选项卡
2.点击选项卡回到相应的内容页面
3.点击删除显示最后的内容区域
4.左边菜单和头部标签页要一一对应，同时视觉上active同步
以上便是一般后台管理框架模板的形式，也是该模板实现的难点；
小刘简易实现效果如下：
以上便是小刘实现的效果了，下面贴一些核心代码：
难点：还是如何找对应的菜单，标签以及内容页面；如果可以找到还是不难理解的；小刘采用的事iframe形成子页面；获取a链接的data-href 和data-index 进行相应的操作；
点击选项卡生成相应的标签页内容
/*** 左部菜单点击事件*/$(".liu_first_munu").siblings().find("a").click(function () {$(this).parent().parent().siblings().find("a").removeClass("liu_nav_active")$(this).addClass("liu_nav_active");$(this).parent().siblings().children().removeClass("liu_nav_active")let text = $(this).text();let href = $(this).attr("data-href");let index = $(this).attr("data-index");var n = '<iframe name="iframe_' + index + '" width="100%" height="580px" src="' + href + '" data-index="' +index + '"></iframe>';var a = '<a href="javascript:;" class="liu_nav_active" data-href="' + href + '" data-index="' + index + '">' +text +"<i class='glyphicon glyphicon-remove liu_remove' data-href=" + href + " data-index=" + index + "></i>"'</a>';let im_flag = true;$(".liu_iframes iframe").each(function (index_iframe, element) {if ($(element).attr("data-index") == index) {$(element).siblings().hide();$(element).show();im_flag = false;}});if (im_flag) {if ($(".liu_nav_top_tab a").length >= 6) {alert("最多可加载6个选项卡！请先关闭其他选项卡！")return false;}$(".liu_iframes").children().hide();$(".liu_iframes").append(n);}let flag = true;$(".liu_nav_top_tab a").each(function (index_tab, element) {if ($(element).attr("data-index") == index) {$(element).addClass("liu_nav_active");$(element).siblings().removeClass("liu_nav_active");flag = false;}})if (flag) {$(".liu_nav_top_tab a").removeClass("liu_nav_active");$(".liu_nav_top_tab").append(a)}});点击选项卡进入相应的标签页
/*** 头部选项卡点击事件*/$(".liu_nav_top_tab").on("click", "a", function () {$(this).addClass("liu_nav_active");$(this).siblings().removeClass("liu_nav_active")let text = $(this).text();let href = $(this).attr("data-href");let index = $(this).attr("data-index");$(".liu_iframes iframe").each(function (index_iframe, element) {if ($(element).attr("data-index") == index) {$(element).siblings().hide();$(element).show();}});$(".liu_nav_left li a").each(function (index_tab, element) {if ($(element).attr("data-index") == index) {$(this).addClass("liu_nav_active");$(this).parent().siblings().children().removeClass("liu_nav_active")$(this).parent().parent().siblings().find("a").removeClass("liu_nav_active")}})});点击删除删去相应的标签页
/** 头部删除选项卡*/$(".liu_nav_top_tab").on("click", "i", function (event) {let index = $(this).attr("data-index");$(".liu_iframes iframe").each(function (index_iframe, element) {if ($(element).attr("data-index") == index) {$(element).siblings().last().show();$(element).remove();}});$(this).parent().remove();event.stopPropagation();var ifram = $(".liu_iframes iframe")[$(".liu_iframes iframe").length - 1];var ac_index = $(ifram).attr("data-index");$(".liu_nav_left li a").each(function (index_tab, element) {if ($(element).attr("data-index") == index) {$(this).removeClass("liu_nav_active");}if ($(element).attr("data-index") == ac_index) {$(this).addClass("liu_nav_active");}})});代码多有冗余，以后有时间再进行优化；
如有不解，请加java爱好群大家交流：852665736；群里都是热心好客的小伙伴，大家一同进步。
无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注微信公众号：gh_817962068649
手写后台管理框架模板（一）相关推荐
- 毕业设计学习锋迷商城的的笔记（自己设计并手写后台商品管理，分类管理，用户，地址管理系统，订单管理，微信支付（内网穿透））
文章目录 自己添加的后端管理页面 视频演示效果 论文地址 后台代码视频实现讲解思路 1. 商品管理 2.商品分类管理 3.商品地址管理 4.权限管理系统 权限管理系统文章地址 5.订单管理 5.1 6 ...
- Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
简介 这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限 ...
- Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建
框架布局 本章只介绍基础布局,和一些主要的js,页面上基本上都是些交互事件,项目代码上都有注释,不懂的地方debug跑一变就知道了,只是这些事件基本上没有独立存在的,相互之间都有关联 框架风格 新建页 ...
- 基于模板匹配的手写字体数字识别-含Matlab代码
目录 一.引言 二.系统知识的表示与组织 2.1 规则前提条件的描述 2.2 规则结论的表示 2.3 知识库的组织 三.手写字体数字识别算法流程 四.识别结果 五.参考文献 六.Matlab代码获取 ...
- 纯手写原生PHP网站管理后台系统 网站管理系统
一.源码简介 一套纯手写原生的PHP网站管理后台,前端利用LayUI实现,实现PHP初学者专研学习使用,对于PHP学习的人,只有熟悉了原生的PHP开发,才适合利用其它框架搭建自己的网站平台.封城期间, ...
- postman中常用的tests模板以及对应的手写断言
#1.响应码 手写 检查状态码 同时检查多个状态码 注意 :200与201之间为或的关系 用户"||"连接 模板 Status code :Successful POST requ ...
- X-admin经典前端后台管理模板，基于layui的轻量级前端后台管理框架，简单，兼容性好，面向所有层次的前后端程序
X-admin 简介 X-admin基于layui的轻量级前端后台管理框架,简单免费,兼容性好,面向所有层次的前后端程序.创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的.#X-a ...
- 模板匹配算法（手写数字识别）
研一的课程结束了,抓住暑假最后的尾巴,将模式识别与机器学习课程上的作业整理出来,当做是一次复习. 来自我b导的图 模板匹配 模板是已知的.带标签的,将未知的样本和所有模板进行匹配,计算相似度.相似度如 ...
- Vue源码之mustache模板引擎(二) 手写实现mustache
Vue源码之mustache模板引擎(二) 手写实现mustache mustache.js 个人练习结果仓库(持续更新):Vue源码解析 webpack配置 可以参考之前的笔记Webpack笔记 安 ...
最新文章
- (转）Ext与.NET超完美整合 .NET开发者的超级优势
- windows通过putty连接虚拟机Fedora
- SAP 电商云 Spartacus 5_0.md 迁移文档的编写格式
- figma下载_在Figma上进行原型制作的各种触发选项
- allure-pytest 测试报告分享给大家
- java 百度地图返回坐标_Java使用百度地图API，根据地址，查询地址坐标。
- 平面设计素材| 文字排版 堆砌素材
- Thingsboard 本地编译 com.google.protobuf:protoc:exe:osx-x86_64:3.11.4 无法下载
- 零基础学习云计算需要准备什么？
- 武器与战术：对聚变时代太空舰队的构想
- S3C2440-裸机篇-01 | JZ2440开发板快速上手
- 数据结构课设----运动会分数统计系统
- 国外著名大学计算机教学考察随笔
- pythonopencv提取轮廓区域_Python + Opencv 实现轮廓提取，轮廓区域面积计算
- 品牌与商家如何做电商直播运营的呢？
- SCT2430STER电池应用
- 最新综述 | 皮层内外无线神经信号记录系统为脑机接口技术注入全新血液
- @Lazy的使用 懒加载
- Sanliao智能家居平台软件设计
- GZIP文件格式简介