手写后台管理框架模板（一）

引言：前些时间小刘总想自己写个属于自己的后台管理模板，不必再去网上找框架结合。现在小刘抽空写了个简易的模板版本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