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支持后台敏捷 ...
随机推荐
- CentOS/Linux内存占用大，用Shell脚本自动定时清除/释放内存
CentOS/Linux内存占用大,用Shell脚本自动定时清除/释放内存来自:互联网 时间:2020-03-22 阅读:114以下情况可能造成Linux内存占用过高服务配置存在直接分配错误,或隐性分 ...
- PECcpu2006中执行单个测试程序的方法
PECcpu2006中执行单个测试程序的方法 2010-12-30 11:44:00 maray 阅读数 10055更多 分类专栏: 科学理论 版权声明:本文为博主原创文章,遵循CC 4.0 BY ...
- jmeter 通过CSV Data Set Config控件参数化
CSV Data Set Config控件配置如下: 被导入的.csv 文件内容如下 用excel打开如下 设置中url2对应:cn.toursforfun.com 和 www.163.com url ...
- Centos7如何安装开源办公软件Libreoffice
在Centos7安装了WPS,但是用了没两月就出问题,无法正常使用.(准确来说,安装的WPS一直都有各种问题存在,但是没有影响到主要功能也就将就着用,后来是直接输入不了文字) 既然是开源系统,自然而然 ...
- 012.Python的字典和集合的相关函数
一 字典的相关函数 1.1 增函数 dictvar = {"a":1,"b":2} dictvar["c"] = 3 print(dictv ...
- Linux 文件隐藏属性-创建文件默认权限
Linux特殊权限介绍 # password原本只有root可以访问但是为什么普通用户在修改密码的时候也可以改里面的内容. [root@gong ~]# ll /usr/bin/passwd -rws ...
- jmeter while控制器踩坑
在使用jmeter测试一个复杂流程,需要用到while控制器,对于里面的contition,使用jexl3方式,怎么看都没有问题,可是死活跳不出流程,各种莫名其妙的报错,甚至用单个写死的变量(已设置为 ...
- Linux 发行版本介绍
引言 Linux 有非常多的版本,比如世面上常见的有 Ubuntu.RedHat.Fedora.Centos 等,这么多的版本我们究竟该选哪一个呢?对于 Linux 初学者有必要对这些 Linux 发 ...
- docker-ce 安装
配置源 确认版本 添加镜像加速器 https://docs.docker.com/engine/release-notes/19.03/ for centos wget -O /etc/yum.rep ...
- GO学习-(1) why go？
为什么你应该学习Go语言? 终于等到你!Go语言--让你用写Python代码的开发效率编写C语言代码. 为什么互联网世界需要Go语言 世界上已经有太多太多的编程语言了,为什么又出来一个Go语言? 硬件 ...