jq+layui之tab页和欢迎页什么时候出现?

  最近在做一个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"});
                }                                
              });

  这样,欢迎页出现时机不对的问题也就被我们解决了。

原文地址:https://www.cnblogs.com/NeryXJ/p/10318392.html