layui问题汇总
1、动态添加tab，无法显示关闭按钮，或关闭按钮无效
在添加tab的代码处加入以下代码
//触发事件
var active = {
tabAdd: function() {
//新增一个Tab项
element.tabAdd("demo", {
title: $(this).text() + "<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>",
content: "<iframe name="iframe" src="" + this.title + "" frameborder="0" style="width: 100%;"></iframe>"
});
//增加点击关闭事件
var r = $("#tabTitle").find("li");
//每次新打开tab都是最后一个，所以只对最后一个tab添加点击关闭事件
r.eq(r.length - 1).children("i.layui-tab-close").on("click", function() {
element.tabDelete("demo", $(this).parent("li").index());
}), element.tabChange("demo", r.length - 1);
element.init();
},
tabDelete: function(index) {
//删除指定Tab项
element.tabDelete("demo", index); //删除（注意序号是从0开始计算）
},
tabChange: function(index) {
//切换到指定Tab项
element.tabChange("demo", index); //切换（注意序号是从0开始计算）
}
};全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<link rel="stylesheet" type="text/css" href="../../asserts/layui/css/layui.css" />
<script src="../../easyui/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../asserts/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<title>主页</title>
<style type="text/css">
a:hover {
cursor: pointer;
text-decoration: none;
}
</style>
</head>
<body>
<div style="height:60px;position: relative;top: 0;width:100%;z-index: 100;background: #393D49;">
<div style="display: inline;font-size: 40px;margin-left:20px;">
<a><img src="../../img/logo1.png" style="width: 100px;height: 50px;"></a>
</div>
<ul class="layui-nav" style="border-radius: 0;display: inline;float: right;">
<li class="layui-nav-item">
<a href="">admin</a>
</li>
<li class="layui-nav-item">
<a href="">设置</a>
</li>
<li class="layui-nav-item">
<a href="">退出</a>
</li>
</ul>
</div>
<div style="top:60px;position: fixed;overflow-x: hidden;">
<ul class="layui-nav layui-nav-tree layui-nav-side" style="margin-top: 60px;border-radius: 0;">
<li class="layui-nav-item layui-nav-itemed">
<a>日常</a>
<dl class="layui-nav-child">
<dd>
<a name="a" title="../good/list.html">商品管理</a>
</dd>
<dd>
<a name="a" title="../../address.html">用户管理</a>
</dd>
<dd>
<a name="a" title="../../address.html">订单管理</a>
</dd>
<dd>
<a name="a" title="../../address.html">商家入驻申请</a>
</dd>
<dd>
<a name="a" title="../../address.html">评价管理</a>
</dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a>基础</a>
<dl class="layui-nav-child">
<dd>
<a name="a" title="../../address.html">仓库管理</a>
</dd>
<dd>
<a name="a" title="../../address.html">人员管理</a>
</dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a>日志</a>
<dl class="layui-nav-child">
<dd>
<a name="a" title="../../address.html">订单日志</a>
</dd>
<dd>
<a name="a" title="../../address.html">登录日志</a>
</dd>
<dd>
<a name="a" title="../../address.html">异常日志</a>
</dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a>报表</a>
<dl class="layui-nav-child">
<dd>
<a name="a" title="../../address.html">销售报表</a>
</dd>
<dd>
<a name="a" title="../../address.html">进货报表</a>
</dd>
</dl>
</li>
</ul>
</div>
<div style="left: 200px;right:0;position: absolute;overflow-y: auto;">
<div class="layui-tab" lay-filter="demo" lay-allowClose="true">
<ul id="tabTitle" class="layui-tab-title">
</ul>
<div id="tabContainers" class="layui-tab-content">
</div>
</div>
</div>
<script type="text/javascript">
//调整iframe高度
function reinitIframe() {
var iframes = document.getElementsByName("iframe");
try {
for(var i = 0; i < iframes.length; i++)
//iframes[i].height = iframes[i].contentWindow.document.documentElement.scrollHeight;
iframes[i].height = window.screen.height -280;
} catch(ex) {}
}
window.setInterval("reinitIframe()", 200);
layui.use("element", function() {
var $ = layui.jquery,
element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
//触发事件
var active = {
tabAdd: function() {
//新增一个Tab项
element.tabAdd("demo", {
title: $(this).text() + "<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>",
content: "<iframe name="iframe" src="" + this.title + "" frameborder="0" style="width: 100%;"></iframe>"
});
//增加点击关闭事件
var r = $("#tabTitle").find("li");
//每次新打开tab都是最后一个，所以只对最后一个tab添加点击关闭事件
r.eq(r.length - 1).children("i.layui-tab-close").on("click", function() {
element.tabDelete("demo", $(this).parent("li").index());
}), element.tabChange("demo", r.length - 1);
element.init();
},
tabDelete: function(index) {
//删除指定Tab项
element.tabDelete("demo", index); //删除（注意序号是从0开始计算）
},
tabChange: function(index) {
//切换到指定Tab项
element.tabChange("demo", index); //切换（注意序号是从0开始计算）
}
};
$("a[name="a"]").on("click", function() {
var title = $(this).text();
var tabs = $(".layui-tab-title").children();
for(var i = 0; i < tabs.length; i++) {
if($(tabs[i]).html().substr(0,$(tabs[i]).html().indexOf("i")-1) == title) {
element.tabChange("demo", i);
return;
}
}
active["tabAdd"].call(this);
active.tabChange($(".layui-tab-title").children().length - 1);
});
});
</script>
</body>
</html>效果图
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
