Refer to the following :

1、layui Official documents


3、 Demo address ) ( Download address )【 Learn from the past here js You can play like this 】

 <!DOCTYPE html>
<meta charset="utf-8">
<title> Background management </title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="Scripts/layui/layui.js"></script>
<!-- Be careful : If you copy all the code directly to the local , Above css、js The path needs to be changed to your local layui v=2.30 -->
.contextmenu {
display: none;
position: absolute;
width: 110px;
text-align: center;
margin: 0;
padding: 0;
background: #FFFFFF;
border-radius: 5px;
list-style: none;
box-shadow: 0 15px 35px rgba(50,50,90,0.1), 0 5px 15px rgba(0,0,0,0.07);
overflow: hidden;
z-index: 999999;
.contextmenu li {
border-left: 3px solid transparent;
transition: ease .2s;
.contextmenu li a {
display: block;
padding: 10px;
text-decoration: none;
transition: ease .2s;
.contextmenu li:hover {
background: #5FB878;
border-left: 3px solid #9C27B0;
.contextmenu li:hover a {
color: #FFFFFF;
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo" style="background-color:#ffffff;border-bottom:2px solid #028a3f;border-right:2px solid #b102b9;"> Background management </div>
<!-- Head area ( Compatible layui Existing horizontal navigation ) -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item nav-suofang">
<i class="layui-icon zoom-suofang layui-icon-shrink-right" style="font-size: 30px; color: #ffffff;"></i>
<i class="layui-icon size-da-xiao" style="font-size: 30px; color: #ffffff;"></i>
<li class="layui-nav-item"><a id="size_"></a></li>
<li class="layui-nav-item"><a href=""><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;"></i> &nbsp; Console </a></li>
<li class="layui-nav-item"><a href=""> Commodity management </a></li>
<li class="layui-nav-item"><a href=""> user </a></li>
<li class="layui-nav-item">
<a href="javascript:;"> Other systems </a>
<dl class="layui-nav-child">
<dd><a href=""> Email management </a></dd>
<dd><a href=""> Message management </a></dd>
<dd><a href=""> Authorization management </a></dd>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="" class="layui-nav-img">
Virtuous heart
<dl class="layui-nav-child">
<dd><a href=""> Basic information </a></dd>
<dd><a href=""> Security Settings </a></dd>
<li class="layui-nav-item"><a href=""> retired </a></li>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll" id="admin-scroll">
<!-- Left navigation area ( Compatible layui Existing vertical navigation ) -->
<div class="layui-footer" style="border-left:2px solid #b102b9">
<!-- Bottom fixed area --> - Bottom fixed area
<div class="layui-body" style="border-left:2px solid #b102b9;border-top:2px solid #028a3f;">
<!-- Content display area -->
<div class="layui-tab layui-tab-brief" lay-filter="demo" id="" style="margin:0px;">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="0"> Website setup </li>
<div class="layui-tab-content" style="padding:2px 0px 0px 5px;height:100%">
<div class="layui-tab-item layui-show">
<!-- The home page defines one of its own -->
<iframe src="main.html" data-id="0" style="width:100%" frameborder="0"></iframe>
layui.use(['element', 'layer', 'jquery'], function () {
var $ = layui.jquery
, layer = layui.layer
, element = layui.element; //Tab Switching function of , Switch event monitoring, etc , Need to rely on element modular
// Show and hide left navigation
$('.zoom-suofang').on('click', function () {
var sideWidth = $('.layui-bg-black').width();
if (sideWidth === 200) {
left: '0px'
left: '0px'
width: '0px'
$('.zoom-suofang')[0].className = 'layui-icon zoom-suofang layui-icon-spread-left';
} else {
left: '200px'
left: '200px'
width: '200px'
$('.zoom-suofang')[0].className = 'layui-icon zoom-suofang layui-icon-shrink-right';
// simulation F11 Full screen
var bool = true;
$('.size-da-xiao').on('click', function () {
if (bool) {
var docElm = document.documentElement;
var msg = ' Press F11 or Esc You can exit the full screen ';
if (docElm.requestFullscreen) {
else if (docElm.mozRequestFullScreen) {
//Chrome etc.
else if (docElm.webkitRequestFullScreen) {
else if (docElm.msRequestFullscreen) {//ie Compatibility is not very good, so do not use
msg = 'ie Compatibility is not very good, so do not use ';
bool = false;
} else {
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome etc.
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {;
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
bool = true;
// Customize left navigation data
var navtab =
title: ' First level title 1',
icon: '',
open: true,
{ id: 11, title: ' Baidu ', icon: '', href: '' },
{ id: 12, title: ' good 123', icon: '', href: '' },
{ id: 13, title: ' test ', icon: '', href: 'index.aspx' },
title: ' First level title 2',
icon: '',
open: false,
{ id: 21, title: ' Blog Garden ', icon: '', href: '' },
{ id: 22, title: 'CSDN', icon: '', href: '' }
// Left navigation generation method
var getHtml = function (obj) {
var htm = '<ul class="layui-nav layui-nav-tree" lay-filter="test">';
for (var i = 0; i < obj.length; i++) {
if (obj[i].son.length > 0) {// Level 2 is not empty
htm += obj[i].open ? '<li class="layui-nav-item layui-nav-itemed">' : '<li class="layui-nav-item">';
htm += '<a href="javascript:;">' + obj[i].title + '</a><dl class="layui-nav-child">';
for (var j = 0; j < obj[i].son.length; j++) {
htm += '<dd class="nav-click" data-id="' + obj[i].son[j].id + '" data-title="' + obj[i].son[j].title + '" data-href="' + obj[i].son[j].href + '" data-icon="' + obj[i].son[j].icon + '" data-type="tabAdd" ><a href="javascript:;"><i class="layui-icon" style="font-size: 20px; color: #ffffff;">' + obj[i].son[j].icon + '</i> ' + obj[i].son[j].title + '</a></dd>';
htm += '</dl></li>';
htm += '</ul>';
return htm;
element.init();// Update rendering
var $content = $('.layui-body');// To get the height
//iframe The adaptive
$(window).on('resize', function () {
$content.find('iframe').each(function () {
$(this).height($content.height() - 50);
// Just expand a secondary menu
$('.layui-bg-black').find('li.layui-nav-item').each(function () {
$(this).on('click', function () {
// Triggering event
var active = {
tabAdd: function (othis) {
// Add a new one Tab term
element.tabAdd('demo', {
title: '<span class="layui-icon">' +'icon') + '</span>&nbsp;' +'title') + '<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
, content: '<iframe src="' +'href') + '" data-id="' +'id') + '" style="width:100%;height:' + ($content.height() - 50) + 'px;" frameborder="0"></iframe>'
, id:'id')
// Add click Close event
var r = $(".layui-tab-title").find("li");
// Every time you open a new one tab It's the last one , So only for the last one tab Add click Close event
r.eq(r.length - 1).children("i").on("click", function () {
var closeid = $(this).parent("li").attr('lay-id');
// Modify state after closing , Or I won't be able to open it next time
$('#admin-scroll').find('dd[data-id=' + closeid + ']')[0].dataset.type = 'tabAdd';
element.tabDelete("demo", closeid);
}), element.tabChange("demo",'id'));
othis[0].dataset.type = 'tabChange';// After opening, it will data-type It is amended as follows tabChange The next click is to switch
element.init();// Update all ( Re render all )
, tabChange: function (othis) {
// Switch to specified Tab term
element.tabChange('demo','id')); // Switch to
$('.layui-show')[0].children[0].contentWindow.frames.location.reload(true);// Refresh the page You can only refresh the web page under your own project , other ( Baidu or something ) Cross domain error will be reported
// Left navigation click monitor
$('.nav-click').on('click', function () {
var othis = $(this), type = othis[0].dataset.type;
active[type] ? active[type].call(this, othis) : '';
// Tab right click events
$('.layui-tab-title').contextmenu(function (e) {
var posX = e.pageX;
var posY = e.pageY;
"left": posX,
"top": posY
return false;// Prevent the default right-click event in the browser
$(document.activeElement).click(function () {
$(".contextmenu").mouseleave(function () {
// Right click the display box and click events
$('.reight-key').on('click', function () {
var type = $(this).data('type');
switch (type) {
case 'refresh':
var layid = $('li.layui-this')[0].attributes['lay-id'].value;
$('.layui-tab-content').find('iframe').each(function (index, element) {
if ($(this)[0].attributes['data-id'].value == layid) {
var src = $(this)[0].src;
$(this)[0].src = src;// Forced to refresh
return false;
case 'close':
var layid = $('li.layui-this')[0].attributes['lay-id'].value;
if (layid == 0) {
layer.msg(' The home page is not allowed to be closed ');
// Modify state after closing , Or I won't be able to open it next time
$('#admin-scroll').find('dd[data-id=' + layid + ']')[0].dataset.type = 'tabAdd';
element.tabDelete('demo', layid);// Delete
case 'close_other':
var layid = $('li.layui-this')[0].attributes['lay-id'].value;
var arr = $(".layui-tab-title").find("li");
if (arr.length == 1) {
layer.msg(' There's nothing to shut down ');
for (var i = 0; i < arr.length; i++) {
var lay_id = arr[i].attributes['lay-id'].value;
if (lay_id != 0 && lay_id != layid) {
$('#admin-scroll').find('dd[data-id=' + lay_id + ']')[0].dataset.type = 'tabAdd';
element.tabDelete('demo', lay_id);
case 'close_all':
var arr = $(".layui-tab-title").find("li");
for (var i = 0; i < arr.length; i++) {
var layid = arr[i].attributes['lay-id'].value;
if (layid != 0) {
$('#admin-scroll').find('dd[data-id=' + layid + ']')[0].dataset.type = 'tabAdd';
element.tabDelete('demo', layid);
<ul class="contextmenu">
<li><a class="reight-key" data-type="refresh"> Refresh the current </a></li>
<li><a class="reight-key" data-type="close"> Close the current </a></li>
<li><a class="reight-key" data-type="close_other"> Turn off other </a></li>
<li><a class="reight-key" data-type="close_all"> Close all </a></li>

In the past, I just visited the blog Garden to see the masterpieces of the great God , But the level is limited , Most of the comments don't have , Or just a little bit , It's hard to understand. .

I have a bad memory. I can only post the code with most comments here , So that I don't forget how I wrote it ( Most of them are still east copy and West paste )

Layui Write a simple background page for more related articles

  1. Use PHP Develop a simple background interface ( In response to the get Request and post request )

    Write a simple backstage , After receiving app When requesting data , Return the corresponding content : index.php The documents are as follows : <?php $id = $_POST['id']; if($id==001){ echo json_ ...

  2. Asp.NetMVC utilize LigerUI Build a simple background management ( Login verification )

    Last one  Asp.Net in Grid Explain two ways to use LigerUI Load database data, fill in data paging   I understand LigerUI in Grid The basic usage of   Now combined with the content of the previous article to do a simple background management , Of course, there are also front desk pages ...

  3. django Write a simple login registration

    I want to write this , The premise is to know three things : One is, It's about our routing relationship , I wrote about it before wsgiref Write a simple server , Routing is also used , Namely Please come here url The corresponding relationship with the view function . Second, it is ...

  4. How to write a simple shell

    How to write a simple shell After watching <UNIX Environment advanced programming > Since then, I have always wanted to write a simple shell As an exercise , Because of something, I wrote off and on for several months , Now I've written almost to sum up . The source code is in Github: ...

  5. Share : Computer graphics end of term assignment !! utilize WebGL Third party library three.js Write a simple web version “ My world games ”

    I've been busy with the final exam these days , So I haven't updated my blog , I just finished my final assignment today , The mood is surging , So at night anyway , I also want to write a blog to commemorate that I didn't listen in class , Or through the powerful Du Niang completed my homework experience .( Of course, homework ...

  6. How to write a simple webserver( One ): The simplest way to achieve

    This article mainly talks about how to use C/C++ stay Linux Environment to write a simple support concurrent web The server , Regardless of the robustness of the server . Security . Performance, etc .  In this paper , The server only supports GET request . Project address :https://g ...

  7. use C Write a simple push box game ( Two )

    The following is the last essay < use C Write a simple push box game ( One )> To write tuidong() Function is used to judge the situation in front of the game characters , It's a very important function in the box game , Next, we will continue to introduce how the small program of pushing boxes ...

  8. use Python Write a simple Web frame

    One . summary Two . from demo_app Start 3、 ... and .WSGI Medium application Four . distinguish URL 5、 ... and . restructure 1. Regular matching URL 2.DRY 3. Abstract out the frame 6、 ... and . Reference resources One . summary stay Python in ,WSGI( ...

  9. How to write a simple http The server

    Use... In recent days C++ I wrote a simple one HTTP The server , As learning network programming and Linux Hands training project of environment programming , This article records that I am writing a HTTP Problems encountered in the process of server and knowledge learned . The source code of the server is placed in the Github. H ...

Random recommendation

  1. Xamarin For Android Encounters an error java.exe exited with code 1. (msb6006)

    Use today Xamarin Compile one android The project encountered such a problem :java.exe exited with code 1. (msb6006), There is no problem with the project code . So all kinds of Google , stay http://foru ...

  2. SpringMvc Project analysis

    First, configure a view parser in the configuration file , The view parser defines the rules for view parsing , namely controller After processing the request , Return to DispatcheServlet A string ( It could be ModelAndView And so on. ), and D ...

  3. Latex note ( reference ) classification : LaTex 2014-11-08 17:41 239 Human reading Comment on (0) Collection

    When you use LaTeX To write a document , When managing references , You may use bibtex, Maybe you'll find it troublesome , Will choose to use \begin{thebibliography}{10} \bibitem xxxx \bibitem ...

  4. Android HttpClient HttpURLConnection Related introduction

    Android HttpClient HttpURLConnection Related introduction There's a problem stay android studio On the use of HttpClient When writing network access code , Found that this class cannot be imported and used .. ...

  5. be based on visual Studio2013 Introduction to solving algorithms 024 Two way linked list

     subject The realization of double linked list Solution code and comments #include <stdio.h> #include <stdlib.h> #include <time.h> #i ...

  6. awk The random function of rand() and srand() ( turn )

    from : file : 1234567 abcdefg ......   Now I want to take random samples 5 Column composition below ...

  7. System Optimize

    In terms of system , Performance usually depends on connection The connection efficiency and Integration Service The load level of the machine , Common reasons are : Multiple users at the same time Different network protocols There are multiple routes and transitions on the network The source and target ...

  8. IIS Release ASP.NET MVC 4.0 error 500.21 terms of settlement

    from VS2013 Written MVC 4.0 Publish on the server IIS Report error 500.21, terms of settlement : Try a variety of online introductions , It turns out that it's still a module problem .

  9. SSM- Website background management system production (2)---SSM How it works

    SSM How it works Explain the website : Building a basic work environment : mysql eclipse(tomcat8.0) Hb ...

  10. web.xml Configuration instructions

    Preface First ,web.xml The purpose of the file is to configure web Information loaded when the project starts .(web.xml Not one Web The necessary documents for , No, web.xml, The website still works .) And these configurations are naturally implemented through tags , ...