最先说一下左边莱单栏
它是一个最基本的左边莱单栏，完成的全过程非常简单，官方网的表明文本文档就会有，可是我还在导进layer.js以后，立即拷贝这一段官方网编码到我的编写器处时，发觉网页页面是那样的：
发觉，关联特性的莱单并沒有往下拉选择项，这一难题在我导进layer.all.js以后处理了，并且发觉假如是在网页页面的最上边导进得话都没有往下拉选择项，仅有在html编码下边导进，才能够显示信息 ，不知道道是啥缘故。
下边说关键，动态性实际操作tab项
网页页面截屏：
tab项鼠标右键莱单：
这儿鼠标右键莱单的款式并沒有做过多的清理。
html编码：（网页页面中有关引进js和css文档的一部分被我国略了，也有要留意jQuery的引进次序）
<div class="layui-tab layui-tab-card site-demo-button" style="position: relative;">
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认设置进行</a>
<dl class="layui-nav-child">
<dd>
<a data-url="a" data-id="11" data-title="选择项a" href="#" class="site-demo-active" data-type="tabAdd">选择项a</a>
</dd>
<dd>
<a href="#" data-url="b" data-title="选择项b" data-id="22" class="site-demo-active" data-type="tabAdd">选择项b</a>
</dd>
<dd>
<a href="">自动跳转</a>
</dd>
</dl>
</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>
<li class="layui-nav-item">
<a href="#" data-url="c" data-title="选择项c" data-id="33" class="site-demo-active" data-type="tabAdd">商品c</a>
</li>
<li class="layui-nav-item">
<a href="">绝大多数据</a>
</li>
</ul>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
<ul class="layui-tab-title">
</ul>
<ul class="rightmenu" style="display: none;position: absolute;">
<li data-type="closethis">关掉当今</li>
<li data-type="closeall">关掉全部</li>
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
js编码：
layui.use('element', function() {
var $ = layui.jquery;
var element = layui.element; //Tab的转换作用，转换恶性事件监视等，必须依靠element控制模块
//开启恶性事件
var active = {
//在这里里给active关联几类恶性事件，后边可根据active启用这种恶性事件
tabAdd: 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层的尺寸
},
tabChange: function(id) {
//转换到特定Tab项
element.tabChange('demo', id); //依据传到的id传到到特定的tab项
},
tabDelete: function (id) {
element.tabDelete("demo", id);//删掉
}
, tabDeleteAll: function (ids) {//删掉全部
$.each(ids, function (i,item) {
element.tabDelete("demo", item); //ids是一数量组，里边储放了好几个id，启用tabDelete方式各自删掉
})
}
};
//当点一下有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.tabAdd(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.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
}
}
//最终无论是不是增加tab，最终都转到要开启的选择项网页页面上
active.tabChange(dataid.attr("data-id"));
});
function CustomRightClick(id) {
//撤销鼠标右键 rightmenu特性刚开始是掩藏的 ，当右击的情况下显示信息，左击的情况下掩藏
$('.layui-tab-title li').on('contextmenu', function () { return false; })
$('.layui-tab-title,.layui-tab-title li').click(function () {
$('.rightmenu').hide();
});
//桌面上点一下右击
$('.layui-tab-title li').on('contextmenu', function (e) {
var popupmenu = $(".rightmenu");
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, top: t }).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);
}
$('.rightmenu').hide(); //最终再掩藏鼠标右键莱单
})
function FrameWH() {
var h = $(window).height() -41- 10 - 60 -10-44 -10;
$("iframe").css("height",h+"px");
}
$(window).resize(function () {
FrameWH();
})
});
tab项是放到<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;"> 这一div中的，在其中有一个关键的特性lay-filter，在js中启用的tabAdd，tabDelete等多种多样方式都带上了这一主要参数，我对于此事的了解是非常于一个分辨阻拦作用，将tab项放到lay-filter=‘demo’的div中。能够依靠该主要参数，进行特定原素的部分升级。
在其中也有有关element的实际操作，var element = layui.element
element控制模块的案例
回到的element自变量为该案例的目标，带上一些用以原素实际操作的基本方式，大家便是用这种方式开展tab项的增加和删掉也有转换。
它是element 中的tabAdd方式，在其中的content能够是一个iframe网页页面，在此例中，我也是传送了一个简易的网页页面，这就完成了不一样网页页面间的一些转换。
element.tabAdd('demo', {
title: '选择项卡的题目'
,content: '选择项卡的內容' //适用传到html
,id: '选择项卡题目的lay-id特性值'
});
贴上以前参考的一个详细地址：https://www.cnblogs.com/zhoushangwu/p/7891543.html
到此这篇有关应用layui完成左边莱单栏及动态性实际操作tab项的方式的文章内容就详细介绍到这了,大量有关layui动态性实际操作tab项內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 小程序和公众号区别_小程序生成二维码_小程序前端框架_小程序开发商排名_小程序码 版权所有 （网站地图） 粤ICP备10235580号