Layui 写一个简单的后台页面
参考如下：
1、layui 官方文档 http://www.layui.com/doc/
2、https://blog.csdn.net/huyanliang/article/details/77966610
3、http://m.zhengjinfan.cn/（演示地址）http://git.oschina.net/besteasyteam/beginner_admin （下载地址）【在这里学习到原来js可以这么玩】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理</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>
<!-- 注意：如果你直接复制所有代码到本地，上述css、js 路径需要改成你本地的 layui v=2.30 -->
<style>
.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;
}
</style>
</head>
<body>
<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;">后台管理</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<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>
<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> 控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll" id="admin-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
</div>
</div>
<div class="layui-footer" style="border-left:2px solid #b102b9">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
<div class="layui-body" style="border-left:2px solid #b102b9;border-top:2px solid #028a3f;">
<!--内容显示区域-->
<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">网站设置 </li>
</ul>
<div class="layui-tab-content" style="padding:2px 0px 0px 5px;height:100%">
<div class="layui-tab-item layui-show">
<!--主页自己定义一个-->
<iframe src="main.html" data-id="0" style="width:100%" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['element', 'layer', 'jquery'], function () {
var $ = layui.jquery
, layer = layui.layer
, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
//显示与隐藏左侧导航
$('.zoom-suofang').on('click', function () {
var sideWidth = $('.layui-bg-black').width();
if (sideWidth === 200) {
$('.layui-body').animate({
left: '0px'
});
$('.layui-footer').animate({
left: '0px'
});
$('.layui-bg-black').animate({
width: '0px'
});
$('.zoom-suofang')[0].className = 'layui-icon zoom-suofang layui-icon-spread-left';
} else {
$('.layui-body').animate({
left: '200px'
});
$('.layui-footer').animate({
left: '200px'
});
$('.layui-bg-black').animate({
width: '200px'
});
$('.zoom-suofang')[0].className = 'layui-icon zoom-suofang layui-icon-shrink-right';
}
});
//模拟F11全屏
var bool = true;
$('.size-da-xiao').on('click', function () {
if (bool) {
var docElm = document.documentElement;
var msg = '按F11或Esc即可退出全屏';
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (docElm.msRequestFullscreen) {//ie兼容性不太好所以先不使用
//docElm.msRequestFullscreen();
msg = 'ie兼容性不太好所以先不使用';
}
layer.msg(msg);
bool = false;
} else {
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome等
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
bool = true;
}
});
//自定义左侧导航数据
var navtab =
[
{
title: '一级标题1',
icon: '',
open: true,
son:
[
{ id: 11, title: '百度', icon: '', href: 'http://www.baidu.com' },
{ id: 12, title: '好123', icon: '', href: 'http://www.hao123.com' },
{ id: 13, title: '测试', icon: '', href: 'index.aspx' },
]
},
{
title: '一级标题2',
icon: '',
open: false,
son:
[
{ id: 21, title: '博客园', icon: '', href: 'https://www.cnblogs.com/' },
{ id: 22, title: 'CSDN', icon: '', href: 'https://www.csdn.net/' }
]
}
];
//左侧导航生成方法
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) {//二级不为空
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;
}
$('#admin-scroll').html(getHtml(navtab));
element.init();//更新渲染
var $content = $('.layui-body');//用来获取高度
//iframe自适应
$(window).on('resize', function () {
$content.find('iframe').each(function () {
$(this).height($content.height() - 50);
});
}).resize();
//只展开一个二级菜单
$('.layui-bg-black').find('li.layui-nav-item').each(function () {
$(this).on('click', function () {
$(this).siblings().removeClass('layui-nav-itemed');
});
});
//触发事件
var active = {
tabAdd: function (othis) {
//新增一个Tab项
element.tabAdd('demo', {
title: '<span class="layui-icon">' + othis.data('icon') + '</span> ' + othis.data('title') + '<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
, content: '<iframe src="' + othis.data('href') + '" data-id="' + othis.data('id') + '" style="width:100%;height:' + ($content.height() - 50) + 'px;" frameborder="0"></iframe>'
, id: othis.data('id')
});
//增加点击关闭事件
var r = $(".layui-tab-title").find("li");
//每次新打开tab都是最后一个，所以只对最后一个tab添加点击关闭事件
r.eq(r.length - 1).children("i").on("click", function () {
var closeid = $(this).parent("li").attr('lay-id');
//关闭后修改状态，不然下次打不开了
$('#admin-scroll').find('dd[data-id=' + closeid + ']')[0].dataset.type = 'tabAdd';
element.tabDelete("demo", closeid);
}), element.tabChange("demo", othis.data('id'));
othis[0].dataset.type = 'tabChange';//打开过后将data-type修改为 tabChange 下次点击就是切换了
element.init();//更新全部(全部重新渲染)
}
, tabChange: function (othis) {
//切换到指定Tab项
element.tabChange('demo', othis.data('id')); //切换到
$('.layui-show')[0].children[0].contentWindow.frames.location.reload(true);//刷新页面 只能刷新自己项目下的网页，其他(百度之类的)会报跨域错误
}
};
//左侧导航点击监听
$('.nav-click').on('click', function () {
var othis = $(this), type = othis[0].dataset.type;
active[type] ? active[type].call(this, othis) : '';
});
//选项卡右键事件
$('.layui-tab-title').contextmenu(function (e) {
var posX = e.pageX;
var posY = e.pageY;
$(".contextmenu").css({
"left": posX,
"top": posY
}).show();
return false;//阻止浏览器默认右键点击事件
});
$(document.activeElement).click(function () {
$(".contextmenu").hide(3000);
});
$(".contextmenu").mouseleave(function () {
$(".contextmenu").hide(3000);
});
//右键显示框点击事件
$('.reight-key').on('click', function () {
var type = $(this).data('type');
//layer.msg(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;//强制刷新
return false;
}
});
break;
case 'close':
var layid = $('li.layui-this')[0].attributes['lay-id'].value;
if (layid == 0) {
layer.msg('首页不允许关闭的');
return;
}
//关闭后修改状态，不然下次打不开了
$('#admin-scroll').find('dd[data-id=' + layid + ']')[0].dataset.type = 'tabAdd';
element.tabDelete('demo', layid);//删除
break;
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('没有可关闭的');
return;
}
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);
}
}
break;
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);
}
}
break;
}
});
});
</script>
<ul class="contextmenu">
<li><a class="reight-key" data-type="refresh">刷新当前</a></li>
<li><a class="reight-key" data-type="close">关闭当前</a></li>
<li><a class="reight-key" data-type="close_other">关闭其他</a></li>
<li><a class="reight-key" data-type="close_all">全部关闭</a></li>
</ul>
</body>
</html>
往日只是逛逛博客园看看大神神作，无奈水平有限，大部分注释没有，要么就一点，很难理解。
记性一项不好的我只能将写有大部分注释的代码贴在这里，以免后面忘了当初怎么写的（大部分还是东复制西粘贴）
Layui 写一个简单的后台页面的更多相关文章
- 使用PHP开发一个简单的后台接口（响应移动端的get请求和post请求）
写一个简单的后台,在接到app请求数据的时候,返回对应的内容: index.php文件如下: <?php $id = $_POST['id']; if($id==001){ echo json_ ...
- Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）
上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页 了解了LigerUI 中Grid的基本用法 现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...
- django写一个简单的登陆注册
要写这个,前提还是需要知道三个知识: 一个是urls.py,它是写我们的路由关系的,之前我写了通过wsgiref写一个简单的服务端,也用到了路由,就是 请求过来的url和视图函数的对应关系. 二是就是 ...
- 如何写一个简单的shell
如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 如何写一个简单的webserver(一)：最简实现
本文主要讲述如何用C/C++在Linux环境下写一个简单的支持并发的web服务器,并不考虑服务器的健壮性.安全性.性能等一系列因素. 在本文中,该服务器仅支持GET请求. 项目地址:https://g ...
- 用C写一个简单的推箱子游戏（二）
下面接着上一篇随笔<用C写一个简单的推箱子游戏(一)>来写 tuidong()函数是用来判断游戏人物前方情况的函数,是推箱子游戏中非常重要的一个函数,下面从它开始继续介绍推箱子的小程序怎么 ...
- 手把手教你从零写一个简单的 VUE
本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...
- 手把手教你从零写一个简单的 VUE--模板篇
教程目录1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 Hello,我又回来了,上一次的文章教会了大家如何书写一个简单 VUE,里面实现了VUE 的数据驱动视图 ...
随机推荐
- Java使用Jedis操作Redis大全
Java操作Redis需要导入两个jar: commons-pool2-2.4.2.jar jedis-2.1.0.jar package com.chinasofti.test; import ja ...
- 为什么vue支持IE9以上的IE浏览器？
原因如下: 1.vue框架中核心的双向绑定原理是利用Object.defineProperty()方法实现的. 2.该方法第一个被实现是在IE8中,但是存在诸多限制:只能在DOM对象上使用这个方法,而 ...
- Android 开发 获取Android设备的屏幕高宽
获得屏幕的宽度和高度有很多种方法: //1.通过WindowManager获取 DisplayMetrics dm = new DisplayMetrics(); heigth = dm.height ...
- 【python】Django自定义模板函数
参考:https://blog.csdn.net/wenyuanhai/article/details/73656761 注意: 1.自定义模板函数的路径必须为APP的templatetags下:ap ...
- 小程序[publib]:1 request:fail ssl hand shake error 如果用的是阿里云和宝塔那么如下解决
小程序[publib]:1 request:fail ssl hand shake error 如果用的是阿里云和宝塔那么如下解决 宝塔里面的站点SSL右侧的配置(PEM格式) 需要把 阿里云 下载的 ...
- genymotion virtual device 用迅雷下载
找到虚拟机下载Log文件 打开后,找到原来下载的地址 以ova结尾的文件,然后用迅雷下载这个文件. 下载好的文件放在 C:\Users\用户名\AppData\Local\Genymobile\Gen ...
- Chrome添加Axure RP插件
之前一直用 Firefox 浏览器浏览原型文件,一直用不惯,而且用 Firefox 的唯一目的就是看原型.其他都是用 Chrome 浏览器,来回切换,各种麻烦,然后下定决心解决 Chrome 浏览器无 ...
- 第8章 IO库 自我综合练习
要求: 文本内容: Tom 11144455 12345678998 Jone 88888888 99999999999 1.将文本文件中的内容读入,并显示到屏幕上: 2.手动输入“Mary 77 ...
- javascript中如何判断变量类型
typeof 只能判断基本类型,如number.string.boolean.当遇上引用类型变量就没那么好用了,结果都是object.使用Object.prototype.toString.call( ...
- Windows10安装pycocotools方法，亲测可用！
如果遇到:No module named 'pycocotools' 错误,说明你的环境需要安装pycocotools,以下介绍在Windows10下安装pycocotools的方法,这是本人结合看过 ...