Handwritten background management framework template (I)

introduction ： Some time ago, Xiao Liu always wanted to write his own background management template , There is no need to go online to find a framework combination . Now Xiao Liu has taken the time to write a simple template version 1.0 Then I have time to optimize .

The home page of the background management framework generally has header users and system information , The menu bar is mostly on the left , On the right is the content display area . The right side may be divided into two parts , One part is the tab , One part is the content area ;

The main ideas are as follows ：

1. Click the menu on the left to display the contents on the right , At the same time, the corresponding label tab appears above the content

2. Click the tab to return to the corresponding content page

3. Click Delete to display the last content area

4. The left menu and the header tab should correspond one by one , While visually active Sync

The above is the form of general background management framework template , It is also the difficulty in the implementation of the template ;

Xiao Liu's simple implementation results are as follows ：

The above is what Xiao Liu achieved , Here are some core codes ：

difficulty ： Or how to find the corresponding menu , Tags and content pages ; If you can find it, it is not difficult to understand ; What Xiao Liu adopted iframe Form sub page ; obtain a Of the link data-href and data-index Operate accordingly ;

Click the tab to generate the corresponding tab content

	/**
		 *  Click event in the left menu 
		 */
		$(".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(" Up to... Can be loaded 6 Tabs ！ Please close other tabs first ！")
					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)
			}
		});

  Click the tab to enter the corresponding tab

	/**
		 *  Header tab click event 
		 */
		$(".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")
				}
			})
		});

Click Delete to delete the corresponding tab

/*
         *  Header delete tab 
		*/
		$(".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");
				}
			})
		});

Code is redundant , You can optimize it later ;

If there is any confusion , Please add java Like to communicate with others ：852665736; The group is full of hospitable friends , Let's make progress together .

Free sharing of source code, technology and interview documents , For more excellent and exquisite source code technology stack sharing, please follow wechat official account ：gh_817962068649