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支持后台敏捷 ...
随机推荐
- Ubuntu相关系统配置问题
1.Ubuntu 16.04下安装VMware Tools 由于下载的是ubuntu-16.04.3-desktop-amd64,需要安装vmware tools,原来提取提取文件再解压的方式比较麻烦 ...
- Linux_磁盘管理理论概述
一.磁盘阵列 1.什么是磁盘阵列? 1️⃣:磁盘整列就是将多块独立的磁盘组合到一起,形成容量大的磁盘组. 2️⃣:将相同的数据存放到不多个的磁盘的不同位置 2.RAID0 1️⃣:RAID0是磁盘整列 ...
- liveCD版： CD光盘映像，和liveDVD一样，唯一的区别就是该版本中包含的软件包会少一点，安装系统时使用 U 盘或者CD光盘进行安装。
https://man.linuxde.net/download/CentOS/ CentOS,英文全称"Community Enterprise Operating System" ...
- Java Stream 流（JDK 8 新特性）
什么是 Steam Java 8 中新增了 Stream(流)来简化集合类的使用,Stream 本质上是个接口,接口中定义了很多对 Stream 对象的操作. 我们知道,Java 中 List 和 S ...
- fdisk 磁盘分区命令
fdisk fdisk磁盘分区命令 -v 打印 fdisk 的版本信息并退出．-l 列出指定设备的分区表信息并退出. 如果没有给出设备,那么使用那些在 /proc/partitions ( ...
- 统计行数、文件夹个数、文件个数的相关shell命令
极客君最近做项目,刚好遇到需要统计一些sql文件数量的问题,用到一些实用的shell命令,记录下来,以后万一还能用上呢? 如果在终端不打开文件看到一共多少行,则可以使用wc命令来实现: wc -l [ ...
- 学习Git的一些总结
Git是以后公司工作必不可少的,所以早点了解使用它是很有必要的 一般国外的开源是GitHub 国内的是码云Gitee 至于git的安装教程,这里就不啰嗦啦,面向百度即可,安装完成鼠标右键会多几个选项: ...
- JVM-栈帧之局部变量表
1.栈帧的内部结构 每个栈帧中存储着: 局部变量表(Local Variables) 操作数栈(Operand Stack)(或表达式栈) 动态链接(Dynamic Linking)(或指向运行时常量 ...
- https://www.jianshu.com/writer#/notebooks/164311/notes/88906048/preview
什么是 webassembly 在 2019 年 12 月之前,如果你要编写一个web页面,那一定离不开 html.css.js 这三个好兄弟.在 2019 年 12 月之后 W3C 宣布 webas ...
- springboot2.x整合tkmapper
springboot整合tkmapper 1.导入pom依赖 1.1 导入springboot的parent依赖 <parent> <artifactId>spring-boo ...