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支持后台敏捷 ...
随机推荐
- CSS中的颜色、长度、角度、时间
一.颜色的表示方法 颜色是通过对红.绿和蓝光的组合来显示的. 1.颜色名 1 <!DOCTYPE html> 2 <html lang="en"> 3 &l ...
- Linux GCC lib库相互引用，互相依赖（交叉引用）链接解决办法
Linux GCC中,如果lib a依赖b,b又依赖a,链接的时候无论a放在前,还是b放在前,都会提示unrefrence. 解决办法就是: 链接的时候a链接两次,即: -la -lb -la
- 【转载】在python的class中的,self到底是什么？
在python的class中的,self到底是什么? 答案:self可以理解为一个字典变量,内部存的就是对象的数据属性.如:{'name':'zhang','age':'18'}就是这些. 注意只 ...
- 一文详解 Linux 系统常用监控工一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)具(top,htop,iotop,iftop)
一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop) 概 述 本文主要记录一下 Linux 系统上一些常用的系统监控工具,非常好用.正所谓磨刀不误砍柴工,花点时间 ...
- JDK版本升级
背景:本来安装了一个1.6版本的JDK,因为版本过低需要升级成1.8 安装过程很简单一路next,主要是遇到几个问题需要备注一下解决方法. Error opening registry key'sof ...
- Linux服务之Apache服务篇
apache httpd:提供http服务 http超文本协议 HTML超文本标记语言 URL(Uniform Resource Locator)统一资源定位符 http://www.sina.com ...
- brk 和 sbrk 区别
转自:https://www.cnblogs.com/chengxuyuancc/p/3566710.html brk和sbrk的定义,在man手册中定义了这两个函数: 1 #include < ...
- 阿里云RDs 网络白名单 专用网络 经典网络
云服务为了安全性总是有不同的安全规则,第一就是需要明白里面的网络类型 专有网络是您自己独有的云上私有网络.您可以完全掌控自己的专有网络,例如选择IP地址范围.配置路由表和网关等,您可以在自己定义的 ...
- 记一次 .NET 某三甲医院HIS系统 内存暴涨分析
一:背景 1. 讲故事 前几天有位朋友加wx说他的程序遭遇了内存暴涨,求助如何分析? 和这位朋友聊下来,这个dump也是取自一个HIS系统,如朋友所说我这真的是和医院杠上了,这样也好,给自己攒点资源, ...
- RabbitMQ（1）学习目标
一:安装,专业术语,简单队列,工作队列,发布/订阅队列,路由队列,主题队列,RPC队列,事务,确认模式,SpringAMQP 二:什么是MQ? MQ就是消息队列,是一种进程间通信或同一进程的不同线程间 ...