layui动态创建Tab、Tab右键功能
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6 <title>layout 后台大布局 - Layui</title>
7 <link rel="stylesheet" href="src/css/layui.css">
8 </head>
9 <style>
10 #colcse li a:hover{background:#009688;color:#fff;}
11 </style>
12 <body class="layui-layout-body">
13 <div class="layui-layout layui-layout-admin">
14 <div class="layui-header">
15 <div class="layui-logo" >layui 后台布局</div>
16 <!-- 头部区域（可配合layui已有的水平导航） -->
17 <ul class="layui-nav layui-layout-left">
18 <li class="layui-nav-item"><a href="">控制台</a></li>
19 <li class="layui-nav-item"><a href="">商品管理</a></li>
20 <li class="layui-nav-item"><a href="">用户</a></li>
21 <li class="layui-nav-item">
22 <a href="javascript:;">其它系统</a>
23 <dl class="layui-nav-child">
24 <dd><a href="">邮件管理</a></dd>
25 <dd><a href="">消息管理</a></dd>
26 <dd><a href="">授权管理</a></dd>
27 </dl>
28 </li>
29 </ul>
30 <ul class="layui-nav layui-layout-right">
31 <li class="layui-nav-item">
32 <a href="javascript:;">
33 <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
34 贤心
35 </a>
36 <dl class="layui-nav-child">
37 <dd><a href="">基本资料</a></dd>
38 <dd><a href="">安全设置</a></dd>
39 </dl>
40 </li>
41 <li class="layui-nav-item"><a href="">退了</a></li>
42 </ul>
43 </div>
44
45 <div class="layui-side layui-bg-black">
46 <div class="layui-side-scroll">
47 <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
48 <ul class="layui-nav layui-nav-tree" lay-filter="test">
49 <li class="layui-nav-item layui-nav-itemed">
50 <a class="" href="javascript:;">所有商品</a>
51 <dl class="layui-nav-child">
52 <dd>
53 <a data-url="a" data-id="99" data-title="列表一" href="#" class="site-demo-active" data-type="ltabAdd">列表一</a>
54 </dd>
55 <dd>
56 <a data-url="a" data-id="88" data-title="列表二" href="#" class="site-demo-active" data-type="ltabAdd">列表二</a>
57 </dd>
58 <dd>
59 <a data-url="a" data-id="77" data-title="列表三" href="#" class="site-demo-active" data-type="ltabAdd">列表三</a>
60 </dd>
61 <dd>
62 <a data-url="a" data-id="66" data-title="列表四" href="#" class="site-demo-active" data-type="ltabAdd">列表四</a>
63 </dd>
64 </dl>
65 </li>
66 <li class="layui-nav-item ">
67 <a href="javascript:;">解决方案</a>
68 <dl class="layui-nav-child">
69 <dd><a href="javascript:;">列表一</a></dd>
70 <dd><a href="javascript:;">列表二</a></dd>
71 <dd><a href="">超链接</a></dd>
72 </dl>
73 </li>
74 <li class="layui-nav-item"><a href="">云市场</a></li>
75 <li class="layui-nav-item"><a href="">发布商品</a></li>
76 </ul>
77 </div>
78 </div>
79
80 <div class="layui-body" style="background-color: #FFFCF5;">
81 <!-- 内容主体区域 -->
82 <div>
83
84 <div id="colcse" class="layui-tab" lay-filter="demo" lay-allowclose="true" >
85 <ul class="layui-tab-title">
86 <!--
87 作者：1669056669@qq.com
88 时间：2018-12-24
89 描述：存放tab
90 -->
91 </ul>
92 <!--
93 作者：1669056669@qq.com
94 时间：2018-12-24
95 描述：tab右键功能
96 -->
97 <ul class="rightmenu" style=" display: none;position: absolute;background: #6E6C79;font-family: '微软雅黑';">
98 <li id="yue" style="color: red;cursor:pointer;" data-id="" data-type="closethis">
99 <a href="#" id="colcse" style="color: white;cursor:pointer;" data-type="closethis" > 关闭当前 </a>
100 </li>
101
102 <li data-type="closeall">
103 <a href="#" id="colcse" style="color: white;cursor:pointer;" data-id="" data-type="closeall"> 关闭所有 </a>
104 </li>
105
106 <li data-type="closeothe">
107 <a href="#" id="colcse" style="color: white;cursor:pointer;" data-id="" data-type="closeothe"> 关闭其它 </a>
108 </li>
109 </ul>
110 <div class="layui-tab-content">
111 </div>
112 </div>
113
114 </div>
115 </div>
116
117 <div id="test1" data-id = "test" class="layui-panel-window">
118 <input class="layui-table-box" title="9999999" />
119 </div>
120
121 <div class="layui-footer">
122 <!-- 底部固定区域 -->
123 layui - 底部固定区域
124 </div>
125
126 </div>
127 <script src="src/layui.js" charset="utf-8"></script>
128 <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
129 <script>
130
131 var ids=0;
132 layui.use('element', function(){
133 var $ = layui.jquery
134 ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
135
136 //触发事件
137 var active = {
138 tabAdd: function(){
139 //新增一个Tab项
140 element.tabAdd('demo', {
141 title: '新选项'+ (Math.random()*1000|0) //用于演示
142 ,content: '内容'+ (Math.random()*1000|0)
143 ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
144 })
145 }
146 ,tabDelete: function(id){
147 //删除指定Tab项
148
149 element.tabDelete('demo', id); //删除：“商品管理”
150 ids=0;
151 //othis.addClass('layui-btn-disabled'); 添加样式
152 },tabDeleteAll: function(idss){
153 $.each(idss, function(i,item) {
154 element.tabDelete('demo', item); //删除所有
155 });
156 ids =0;
157 }
158 ,tabChange: function(id){
159 //切换到指定Tab项
160 element.tabChange('demo', id); //切换到：用户管理
161 },ltabAdd:function(url,id,name){
162 //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
163 //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
164 element.tabAdd('demo', {
165 title: name,
166 content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:99%;"></iframe>',
167 id: id //规定好的id
168 })
169 CustomRightClick(id); //给tab绑定右击事件
170 FrameWH(); //计算ifram层的大小
171
172 }
173 };
174
175 //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
176 $('.site-demo-active').on('click', function() {
177 var dataid = $(this);
178 //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
179 if ($(".layui-tab-title li[lay-id]").length <= 0) {
180 //如果比零小，则直接打开新的tab项
181 active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
182 } else {
183 //否则判断该tab项是否以及存在
184
185 var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
186 $.each($(".layui-tab-title li[lay-id]"), function () {
187 //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
188 if ($(this).attr("lay-id") == dataid.attr("data-id")) {
189 isData = true;
190 }
191 })
192 if (isData == false) {
193 //标志为false 新增一个tab项
194 active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
195 }
196 }
197 //最后不管是否新增tab，最后都转到要打开的选项页面上
198 active.tabChange(dataid.attr("data-id"));
199 });
200 //Hash地址的定位
201 var layid = location.hash.replace(/^#test=/, '');
202 element.tabChange('test', layid);
203
204 element.on('tab(test)', function(elem){
205 location.hash = 'test='+ $(this).attr('lay-id');
206 });
207
208 function FrameWH() {
209 var h = $(window).height() -41- 10 - 60 -10-44 -10;
210 $("iframe").css("height",h+"px");
211 }
212
213 $(window).resize(function () {
214 FrameWH();
215 })
216
217
218 function CustomRightClick(id) {
219 //取消右键 rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
220 $('.layui-tab-title li').on('contextmenu', function () { return false; })
221 $('.layui-tab-title,.layui-tab-title li').click(function () {
222 $('.rightmenu').hide();
223 ids=0;
224 });
225
226 //桌面点击右击
227 $('.layui-tab-title li').on('contextmenu', function (e) {
228
229 var popupmenu = $(".rightmenu");
230 ids +=1;
231 if(ids >1){
232 return true;
233 }
234 popupmenu.find("li").attr("data-id",id); //在右键菜单中的标签绑定id属性
235
236 //判断右侧菜单的位置
237 l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
238 t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
239
240 popupmenu.css({ left: l-190, top: t-50 }).show(); //进行绝对定位
241 //alert("右键菜单")
242 return false;
243 });
244 }
245 $(".rightmenu li").click(function () {
246 //右键菜单中的选项被点击之后，判断type的类型，决定关闭所有还是关闭当前。
247 if ($(this).attr("data-type") == "closethis") {
248 //如果关闭当前，即根据显示右键菜单时所绑定的id，执行tabDelete
249
250 active.tabDelete($(this).attr("data-id"));
251 } else if ($(this).attr("data-type") == "closeall") {
252 var tabtitle = $(".layui-tab-title li");
253 var ids = new Array();
254 $.each(tabtitle, function (i) {
255 ids[i] = $(this).attr("lay-id");
256 })
257 //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
258 active.tabDeleteAll(ids);
259 }else if($(this).attr("data-type") =="closeothe"){
260 var id =$(this).attr("data-id");
261 var tabtitle = $(".layui-tab-title li");
262 var ids = new Array();
263 $.each(tabtitle, function (i) {
264 if(id != $(this).attr("lay-id")){
265 ids[i] = $(this).attr("lay-id");
266 }
267 })
268 active.tabDeleteAll(ids);
269 }
270
271 $('.rightmenu').hide(); //最后再隐藏右键菜单
272 })
273
274 });
275 </script>
276 </body>
277 </html>
layui动态创建Tab、Tab右键功能的更多相关文章
- 动态创建的 CEdit 被限制长度，增加 ES_AUTOHSCROLL 属性；被无法Tab激活焦点，增加 WS_TABSTOP 属性(转)
动态创建的 CEdit 被限制长度,增加 ES_AUTOHSCROLL 属性:被无法Tab激活焦点,增加 WS_TABSTOP 属性. CEdit m_editUrl; // ES_AUTOHSCRO ...
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
- easyui最简单的左右布局实现，及tab的右键菜单实现
发现最近有些人问用JQuery easyui要怎么实现左右结构的布局.就是点击左边的菜单在右边的tab中打开.其实easyui要实现这种布局很简单,只需要简单的几行代码就ok了. 特意做了一个小小的d ...
- 很好用的Tab标签切换功能，延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- vue2.0使用动态组件实现tab切换效果（vue-cli）
<template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> &l ...
- MySQL 数据库的tab 补全功能 （懒人必备）
MySQL 数据库的tab补全功能 跟着步骤走~~ 懒人养成第一步 不仅帮你补全 甚至预判你的预判,就问你可怕不可怕 1.安装相关依赖软件(需要配置yum官方 ...
- layui 根据根据后台数据动态创建下拉框并同时默认选中
第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...
随机推荐
- [Python] 爬虫系统与数据处理实战 Part.1 静态网页
爬虫技术基础 HTTP/HTTPS(7层):应用层,浏览器 SSL:加密层,传输层.应用层之间 TCP/IP(4层):传输层 数据在传输过程中是加密的,浏览器显示的是解密后的数据,对爬虫没有影响 中间 ...
- x小结：certutil -hashfile D:\1.exe MD5
在Win7上,MD5不要使用小写,在Win10上没有这个问题 x小结:certutil -hashfile D:\1.exe MD5certutil -hashfile D:\1.exe SHA1ce ...
- 实例：使用playbook实现httpd安装、配置、以及虚拟主机的配置
一.安装环境配置 1.在控制节点给受控主机配置本地仓库文件 [root@ansible ~]# vim /etc/yum.repos.d/dvd.repo [AppStream] name=appst ...
- fdisk 磁盘分区命令
fdisk fdisk磁盘分区命令 -v 打印 fdisk 的版本信息并退出．-l 列出指定设备的分区表信息并退出. 如果没有给出设备,那么使用那些在 /proc/partitions ( ...
- 使用 .NET 升级助手将.NET Framework应用迁移到.NET 5
从.NET Framework 迁移到.NET 5 犹如搬家,我们都知道搬家是很痛苦的,我们请求搬家公司来减轻我们的压力,.NET 升级助手 的作用就类似我们聘请的搬家公司,帮助我们处理繁重乏味的迁移 ...
- curl测试代理连接某个域名的连接时间
缘由:需要查询一下某些代理访问指定域名所消耗的时间,来判断是否是代理连接受限 以下代理均为示例代理,无法真正连接 1. 通过curl方式来测试指定代理的连接情况,代理无账号密码 curl -x 127 ...
- PyTorch 自动微分示例
PyTorch 自动微分示例 autograd 包是 PyTorch 中所有神经网络的核心.首先简要地介绍,然后训练第一个神经网络.autograd 软件包为 Tensors 上的所有算子提供自动微分 ...
- 达芬奇架构NPU
达芬奇架构NPU 达芬奇架构的核心优势是什么?如何更好地赋能麒麟990? 达芬奇架构,是华为自研的面向AI计算特征的全新计算架构,具备高算力.高能效.灵活可裁剪的特性,是实现万物智能的重要基础.具体来 ...
- VB 老旧版本维护系列---读取xml某个节点的值
读取xml某个节点的值 '定义xml字符串内容地址 Dim xmlFileStr As String = "" '定义所需读取节点的名称 Dim readNodeName As S ...
- MongoDB学习笔记01：入门
MongoDB简介 MongoDB是一个开源.高性能.无模式的文档型数据库,当初的设计就是用于简化开发和方便扩展,是NoSQL数据库产品中的一种.是最 像关系型数据库(MySQL)的非关系型数据库. ...