layui创建后台框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台布局 - Layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<style>
#colcse li a:hover {
background: #009688;
color: #fff;
}
</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<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="">用户</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">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd>
<a data-url="login" data-id="99" data-title="列表一" href="#" class="site-demo-active" data-type="ltabAdd">列表一</a>
</dd>
<dd>
<a data-url="a" data-id="88" data-title="列表二" href="#" class="site-demo-active" data-type="ltabAdd">列表二</a>
</dd>
<dd>
<a data-url="a" data-id="77" data-title="列表三" href="#" class="site-demo-active" data-type="ltabAdd">列表三</a>
</dd>
<dd>
<a data-url="a" data-id="66" data-title="列表四" href="#" class="site-demo-active" data-type="ltabAdd">列表四</a>
</dd>
</dl>
</li>
<li class="layui-nav-item ">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div> <div class="layui-body" style="background-color: #FFFCF5;">
<!-- 内容主体区域 -->
<div> <div id="colcse" class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<!--
作者：1669056669@qq.com
时间：2018-12-24
描述：存放tab
-->
</ul>
<!--
作者：1669056669@qq.com
时间：2018-12-24
描述：tab右键功能
-->
<ul class="rightmenu" style=" display: none;position: absolute;background: #6E6C79;font-family: '微软雅黑';">
<li id="yue" style="color: red;cursor:pointer;" data-id="" data-type="closethis">
<a href="#" id="colcse" style="color: white;cursor:pointer;" data-type="closethis">
关闭当前 </a>
</li>
<li data-type="closeall">
<a href="#" id="colcse" style="color: white;cursor:pointer;" data-id="" data-type="closeall"> 关闭所有 </a>
</li>
<li data-type="closeothe">
<a href="#" id="colcse" style="color: white;cursor:pointer;" data-id="" data-type="closeothe"> 关闭其它 </a>
</li>
</ul>
<div class="layui-tab-content">
</div>
</div> </div>
</div> <div id="test1" data-id="test" class="layui-panel-window">
<input class="layui-table-box" title="9999999" />
</div> <div class="layui-footer">
<!-- 底部固定区域 -->
layui - 底部固定区域
</div> </div>
<script src="src/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
var ids = 0;
layui.use('element', function() {
var $ = layui.jquery,
element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块 //触发事件
var active = {
tabAdd: function() {
//新增一个Tab项
element.tabAdd('demo', {
title: '新选项' + (Math.random() * 1000 | 0) //用于演示
,
content: '内容' + (Math.random() * 1000 | 0),
id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
})
},
tabDelete: function(id) {
//删除指定Tab项
element.tabDelete('demo', id); //删除：“商品管理”
ids = 0;
//othis.addClass('layui-btn-disabled'); 添加样式
},
tabDeleteAll: function(idss) {
$.each(idss, function(i, item) {
element.tabDelete('demo', item); //删除所有
});
ids = 0;
},
tabChange: function(id) {
//切换到指定Tab项
element.tabChange('demo', id); //切换到：用户管理
},
ltabAdd: function(url, id, name) {
//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
element.tabAdd('demo', {
title: name,
content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
'.html" style="width:100%;height:99%;"></iframe>',
id: id //规定好的id
})
CustomRightClick(id); //给tab绑定右击事件
FrameWH(); //计算ifram层的大小 }
};
//当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
$('.site-demo-active').on('click', function() {
var dataid = $(this);
//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，则直接打开新的tab项
active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
} else {
//否则判断该tab项是否以及存在 var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function() {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
if ($(this).attr("lay-id") == dataid.attr("data-id")) {
isData = true;
}
})
if (isData == false) {
//标志为false 新增一个tab项
active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
}
}
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(dataid.attr("data-id"));
});
//Hash地址的定位
var layid = location.hash.replace(/^#test=/, '');
element.tabChange('test', layid); element.on('tab(test)', function(elem) {
location.hash = 'test=' + $(this).attr('lay-id');
}); function FrameWH() {
var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
$("iframe").css("height", h + "px");
} $(window).resize(function() {
FrameWH();
})
function CustomRightClick(id) {
//取消右键 rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
$('.layui-tab-title li').on('contextmenu', function() {
return false;
})
$('.layui-tab-title,.layui-tab-title li').click(function() {
$('.rightmenu').hide();
ids = 0;
}); //桌面点击右击
$('.layui-tab-title li').on('contextmenu', function(e) { var popupmenu = $(".rightmenu");
ids += 1;
if (ids > 1) {
return true;
}
popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性 //判断右侧菜单的位置
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY; popupmenu.css({
left: l - 190,
top: t - 50
}).show(); //进行绝对定位
//alert("右键菜单")
return false;
});
}
$(".rightmenu li").click(function() {
//右键菜单中的选项被点击之后，判断type的类型，决定关闭所有还是关闭当前。
if ($(this).attr("data-type") == "closethis") {
//如果关闭当前，即根据显示右键菜单时所绑定的id，执行tabDelete active.tabDelete($(this).attr("data-id"));
} else if ($(this).attr("data-type") == "closeall") {
var tabtitle = $(".layui-tab-title li");
var ids = new Array();
$.each(tabtitle, function(i) {
ids[i] = $(this).attr("lay-id");
})
//如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
active.tabDeleteAll(ids);
} else if ($(this).attr("data-type") == "closeothe") {
var id = $(this).attr("data-id");
var tabtitle = $(".layui-tab-title li");
var ids = new Array();
$.each(tabtitle, function(i) {
if (id != $(this).attr("lay-id")) {
ids[i] = $(this).attr("lay-id");
}
})
active.tabDeleteAll(ids);
} $('.rightmenu').hide(); //最后再隐藏右键菜单
})
});
</script>
</body>
</html>
效果：
原文地址:https://www.cnblogs.com/zjc2018/p/10171191.html 刚学layui不是很会用tab标签，非常感谢这位大神，可以直接用的 个人笔记
layui创建后台框架的更多相关文章
- BeginnerAdmin后台框架的使用！
基于layui的后台框架,我比较喜欢使用BeginnerAdmin模板.但是在构建的时候可能会遇到一些问题. 问题一:侧栏出不来: 报错是这样的: 这个错误:说明的是 navbar.js没有引进来. ...
- Layui栅格系统与后台框架布局
一.栅格布局规则: 1. 采用 layui-row 来定义行,如:<div class="layui-row"></div> 2. 采用类似 layui-c ...
- spring boot + mybatis + layui + shiro后台权限管理系统
后台管理系统 版本更新 后续版本更新内容 链接入口: springboot + shiro之登录人数限制.登录判断重定向.session时间设置:https://blog.51cto.com/wyai ...
- 整合springboot（app后台框架搭建四）
springboot可以说是为了适用SOA服务出现,一方面,极大的简便了配置,加速了开发速度:第二方面,也是一个嵌入式的web服务,通过jar包运行就是一个web服务: 还有提供了很多metric,i ...
- 关于vue 框架与后台框架的混合使用的尝试
这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...
- 关于vue 框架与后台框架的混合使用的尝试------转载
这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...
- 一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面
SpringBoot springboot的目的是为了简化spring应用的开发搭建以及开发过程.内部使用了特殊的处理,使得开发人员不需要进行额外繁锁的xml文件配置的编写,其内部包含很多模块的配置只 ...
- 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- 开源libco库：单机千万连接、支撑微信8亿用户的后台框架基石
微信于2013年开源的ibco库,是微信后台大规模使用的c/c++协程库,2013年至今稳定运行在微信后台的数万台机器上.libco在2013年的时候作为腾讯六大开源项目首次开源,ibco支持后台敏捷 ...
随机推荐
- 磁盘IO过高时的处理办法 针对系统中磁盘IO负载过高的指导性操作
磁盘IO过高时的处理办法 针对系统中磁盘IO负载过高的指导性操作 主要命令:echo deadline > /sys/block/sda/queue/scheduler 注:以下的内容仅是提供参 ...
- centos8.2-2004
~]# cat /etc/*leaseCentOS Linux release 8.2.2004 (Core)NAME="CentOS Linux"VERSION="8 ...
- DES加密 超详解 及 C++编程实现
参考资料: 1.计算机与软件学院实验报告管理系统资料 2.强烈推荐观看:<信息安全技术>课程微课设计 简介 什么是DES DES全称为Data Encryption Standard,即数 ...
- python set去重简析
python 中的集合可以去重是实现了__hash__与__eq__ 当class没有定义__eq__()方法时,那么它也不应该定义__hash__()方法.如果它定义了__eq__()方法,却没有定 ...
- 用户从控制台输入n个整数,比较并输出其中的最大值和最小值
package judgment;import java.util.Scanner;/** * 用户输入n个整数,找出最大值和最小值并打印输出 */public class Judgment { pu ...
- 【无人机航空摄影测量精品教程】目录：摄影测量、Pix4d、EPS、CC、PhotoScan项目化作业流程及注意事项汇总
目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 该专栏为目前最为热门的无人机航测内外业项目,主要内容包括:无人机航测外业作业流程(像控点布设.航线规划.仿地飞行.航拍)和内业数据 ...
- 安装tomcat8 env
目录 1 download package 2 install tomcat 3 Pro config 4. docker image 1 download package wget https:// ...
- LogBack 日志等级设置无效，原因竟然是因为这个？！
Hello,大家好,我是楼下小黑哥~ 最近被公司派去北京出差,本以为是个轻松的差事,北京一周游~ 但是没想到第一天就是九点半下班, 大意了~ 好了,回到正题,今天来讲下最近调试项目的时候发现的一个 L ...
- 安装篇--xshell评估过期解决方法
打开XSHELL6(以自身版本为准,没有版本限制),弹出如上提示框,解决如下: 1.点击取消,不用卸载原来的,直接进入官网下载安装免费授权的https://www.netsarang.com/ 2.点 ...
- ASML光刻机PK 原子弹，难度？
ASML光刻机PK 原子弹,难度? 一. 物理世界和网络世界的交汇点:光刻机 光刻机的技术有多高级,看看这个知乎提问,可以感受一下: 有人这样形容光刻机:这是一种集合了数学.光学.流体力学.高分子物 ...