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 ...
随机推荐
- g77介绍 g77 是 Fortran77 的编译器。它对 Fortran 77 标准提供完备的支持，并支持 Fortran 90 和 95 的部分特性。 由于 Fortran 77 标准在数值计算中的影响力，g77 可能是应用最广的Fortran编译器。 在 GCC 4.0 之前，g77 是 GCC 的一部分，但现在，g77 已经停止开发。
GFORTRAN 维基百科,自由的百科全书 跳到导航 跳到搜索 此条目需要扩充. (2018年11月2日)请协助改善这篇条目,更进一步的信息可能会在讨论页或扩充请求中找到.请在扩充条目后将此模 ...
- 051.Python的Django框架简单使用
一 HTTP相关概念 http协议包含由浏览器发送数据到服务器需要遵循的请求协议与服务器发送数据到浏览器需要遵循的响应协议.用于HTTP协议交互的信息被为HTTP报文.请求端(客户端)的HTTP报文 ...
- shell初学之nginx（域名）
创建两个以域名区分的虚拟网站: 1 #!/bin/bash 2 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/ ...
- 3.20 tr：替换或删除字符
tr命令 从标准输入中替换.缩减或删除字符,并将结果写到标准输出. tr [option] [SET1] [SET2] tr [选项] [字符1] [字符2] -d 删除字符 -s ...
- 大师画PCB板子
1.低频电路对于模拟地和数字地要分开布线,不能混用 2.如果有多个A/D转换电路,几个ADC尽量放在一起,只在尽量靠近该器件处单点接地,AGND和DGND都要接到模拟地,电源端子都要接到模拟电源端子: ...
- 发现新大陆 --21lic
21lic网上发单平台 http://project.21ic.com/p/97250
- 加载动画效果 HTML+ CSS
加载动画效果 写在前面 在无限的时间的河流里,人生仅仅是微小又微小的波浪.--郭小川 实现效果 实现原理 通过2个伪元素来设置3条颜色边框 通过定位将3个圆弧边框层叠再一起,再通过旋转实现一个圆的效果 ...
- MyBatis执行器
Mybatis的执行器 下面先展示一张图,用来说明一下Mybatis执行器的整体架构 SimpleExecutor 首先SimpleExecutor是我们最常使用的一个执行器,无论我们执行什么方法默认 ...
- java并发编程工具类JUC第四篇:LinkedBlockingQueue链表队列
在之前的文章中已经为大家介绍了java并发编程的工具:BlockingQueue接口.ArrayBlockingQueue.DelayQueue. LinkedBlockingQueue 队列是Blo ...
- TensorFlow编程结构
TensorFlow编程结构 TensorFlow 与其他编程语言非常不同. 首先通过将程序分为两个独立的部分,构建任何拟创建神经网络的蓝图,包括计算图的定义及其执行.起初这对于传统程序员来说看起来很 ...