zoukankan      html  css  js  c++  java
  • 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"});
                    }                                
                  });

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

  • 相关阅读:
    Oracle使用序列创建自增字段(主键自动增长)
    Oracle 增加修改删除字段
    JavaScript trim函数大赏
    js跨域问题
    document.getElementsByClassName的理想实现
    IIS启用Gzip的方法与优缺点分析
    浅释跳转漏洞
    js跨域及解决方法
    C#编写COM组件
    50种方法巧妙优化你的SQL Server数据库
  • 原文地址:https://www.cnblogs.com/NeryXJ/p/10318392.html
Copyright © 2011-2022 走看看