最近在做一个layui和jq做的后台框架。
当我们点击左边侧边栏的某一项时,右边出现tab项的相应的内容,这时候就难免会遇到这样子的一个问题:当我们编辑修改完之后,一个一个关闭tab项,当全部关闭后,我们要呈现给用户什么呢?
最容易想到的是,呈现刚进来这个页面时大家都能想到的欢迎介绍页。代码实现如下:
$(".layui-body").css({"display":"block"});
起初,我的思路是这样的:
iframe删除的监听:当所有的iframe删除完时,此时的data.index为0,通过if来显示出首页显示的欢迎页
实现的代码是这样的:
element.on('tabDelete(demo)', function(data){ if(data.index==0){ $(".layui-body").css({"display":"block"}); } });
你如果从tab的最右边一项开始删除,一直删到最左边,这没什么问题。但是,如果你从tab最左边开始删,你删掉了左边的第一个,欢迎页就出现了,和后边还没删除的tab页内容重叠了,惨不忍睹。
所以,我们要转换一个新的思路,舍弃通过data.index的值来决定什么时候出现欢迎页。
现在新的思路是:
每关闭一个tab,$(".layui-tab-title"),该元素下面的li的数量就减少一个通过剩余的li总数,来决定要不要显示首页(对应的需求是:如果tab项都关闭了,出现小象欢迎页)
怎么实现呢?且看下面:
element.on('tabDelete(demo)', function(data){ var tabCount=$(".layui-tab-title li[lay-id]").length; if(tabCount==0){ $(".layui-body").css({"display":"block"}); } });
这样,欢迎页出现时机不对的问题也就被我们解决了。