精华内容
下载资源
问答
  • layuitab选项卡

    千次阅读 2019-05-27 08:31:57
    Layuitab切换卡,里面居然隐藏着一个关键模块,可以说如果没有这个声明的模块,那切换的功就不能实现。 下面就说说在body里的代码结构:最外层先给一个 class=“layui-tab” 里面有两层,一个是用ul标签装切换卡的...

    Tab切换卡

    开发工具与关键技术:MVC
    撰写时间:2019.05.27
    

    效果图:
    在这里插入图片描述
    在这里插入图片描述
    Layui的tab切换卡,里面居然隐藏着一个关键模块,可以说如果没有这个声明的模块,那切换的功就不能实现。
    下面就说说在body里的代码结构:最外层先给一个 class=“layui-tab” 里面有两层,一个是用ul标签装切换卡的表头(名称),一个是div包裹着的内容,如图:
    在这里插入图片描述
    很明显ul标签里面装的就是用li标签装的“线上订单”和“线下订单”:

    <ul class="layui-tab-title">
       <li class="layui-this">线上订单</li>
       <li>线下订单</li>
    </ul>
    

    而第二个div标签里面装的肯定就是,“线上订单”下方的内容和“线下订单”下方的内容:
    在这里插入图片描述
    下面就是重点了,以上内容只能说明你把页面结构和页面内容给打好了,但是你要是想要实现,你点击“线上订单”或者“线下订单”就会打开你点击的那个窗口,你必须要用element模块,也就是:

    <script>
       layui.use('element', function () {
           var $ = layui.jquery
           , element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
       });
    </script>
    

    还有要用上layui的css样式插件和js插件,
    在这里插入图片描述

    展开全文
  • layui tab --隐藏删除图标

    千次阅读 2019-04-03 17:59:34
    进入开发者模式,找到要操作的 div,隐藏掉 .layui-tab-close 在js中添加如下代码: $(".layui-tab ul").children('li').first().children('.layui-tab-close').css("display",'none'); 代码解释: 在 .layui-tab ...

    1.预期效果

    让首页不要删除图标,固定在一个位置
    在这里插入图片描述

    2.思路

    进入开发者模式,找到要操作的 div,隐藏掉 .layui-tab-close
    在这里插入图片描述
    在js中添加如下代码:

    $(".layui-tab ul").children('li').first().children('.layui-tab-close').css("display",'none');	
    

    代码解释:
    .layui-tab 下的 第一个li中的class中含有 layui-tab-close 的隐藏掉。

    展开全文
  • 最近在用layui做后台的页面,其中需要用到echarts,但是在tab切换中发现echarts在第一个tab显示正常...我想到了layuitab切换时是利用tab下的div显示和隐藏来实现的,而echarts在你页面刷新的时候就渲染出来了,而...

    最近在用layui做后台的页面,其中需要用到echarts,但是在tab切换中发现echarts在第一个tab显示正常,在第二个tab显示只要100px,导致echarts显示不全的问题,后来在网上找了一下,没有发现解决方法,但是同行们的一些解决其他问题的方法给了我一些思路,我想到了layui在tab切换时是利用tab下的div显示和隐藏来实现的,而echarts在你页面刷新的时候就渲染出来了,而第二个tab已经隐藏了,导致echarts自动获取dom的宽高无效,所以使用的是echarts默认的高宽,我想到了通过监听tab切换事件然后执行resize进行echarts的重新渲染。下面是我的代码在这里插入图片描述
    在这里插入图片描述

    展开全文
  • layui tab切换内 iframe使用hik视频web插件遇见的问题总结所遇到的问题解决方案 ...在layui tabtab进行切换的时候,视频插件不会跟着网页去隐藏。 解决方案 第一个问题是通过大佬的启发,但由于大佬忙没有回复我这

    layui tab切换内 iframe使用hik视频web插件遇见的问题总结

    首先感谢这位大佬的文章带给我的启发。

    https://blog.csdn.net/qq_27933251/article/details/102853252

    所遇到的问题

    1. hik web视频插件不支持iframe,在iframe中使用插件会导致插件的位置计算失误。
    2. 在layui tab层 tab进行切换的时候,视频插件不会跟着网页去隐藏。

    解决方案

    1. 第一个问题是通过大佬的启发,但由于大佬忙没有回复我这个萌新,所以只能自己去研究。
      后来发现:视频插件是基于标识的标签位置来寻找自身插件的位置。虽然iframe中的位置计算错误这个没法去弥补,但是可以通过源标签的位置来进行一个补充(我的这个方法虽然不是最好的,但是可以满足我现有要求)。
    <div style="float:left; width:81%;height:95%;z-index:-1;">
    	<!-- 插件初始化使用的是 playWnd -->
    	<div id="playWnd" style="width:10px;height:10px; margin-top:85px;margin-left:98px;">
    	</div>
    </div>
    
    1. 第二个问题是解决的思路是layui中element的切换事件. 获取网页中所有的 iframe层的对象,遍历查询自己所需要隐藏插件的iframe,通过iframe.contentWindow属性来获取子页面的window对象,进而可以调用隐藏方法。
    //index.html
    layui.use(['element'], function () {
    	var element = layui.element;
    	element.on('tab(filter)', function (data) {
    		var flag = false;
    		var childWindow = null;
    		var ownText = this.innerText + "";
    		layui.each($("iframe"), function (index, elem) {
    			if (elem.src.indexOf("src") >= 0) {
    				childWindow = elem.contentWindow;
    				flag = true;
    				return false;
    			}
    		});
    		if (flag) {
    			if (ownText.indexOf("tab名称") >= 0) {
    				if (childWindow != null) {
    					childWindow.showWnd();
    				}
    			} else {
    				if (childWindow != null) {
    					childWindow.hideWnd();
    				}
    			}
    		}
    	});
    });
    //childiframe.html
    window.hideWnd = function(){
    	oWebControl.JS_HideWnd();
    }
    
    window.showWnd = function(){
    	oWebControl.JS_ShowWnd();
    }
    
    展开全文
  • div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="left_nav"> <li class="layui-nav-item layui-nav-itemed"&...
  • layui表格隐藏列的简单实现方法

    千次阅读 2018-08-08 15:24:31
    需求:渲染表格的时候,比如id在内的一些列是不需要展示给用户看的,但是在操作表格的时候还需要用得到,这就需要隐藏列 的功能 实现效果:页面上不显示,但是能获取到id的值。... elem: '#tab...
  • layui如何让滑动条隐藏?下面本篇文章给大家介绍一下layui table去掉右侧滑动条的实现方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。使用layui table后,table会自动有一个滑动条,使用时...
  • layui的util.fixbar的隐藏

    千次阅读 2019-03-04 09:29:45
    一、为了实现在切换页面或者tab的时候,将相应的fixbar进行动态显示或者隐藏 通过f12检查元素可知通过该工具方法生成了一个ul标签对应的class为layui-fixbar, 则可以使用jQuery的方式获取到该元素,然后通过jQuery...
  • 在使用数据表格的时候难免会遇到和选项卡结合的案例,选项卡默认展现第一项其余的隐藏,这里我是默认展示“单日”。 发现问题: 当切换到“多日”时,表格的宽度无法自适应,全缩在了一起。 解决方法: 给选项卡...
  • Layui常见问题

    2017-11-29 16:22:00
    当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们...
  • Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖element...
  • Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖element模块...
  • 当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们...
  • 1、表格高度自适应设置、单元格内容自动换行 .layui-table-cell{ height:auto;...2、tab选项卡切换时,被隐藏掉的tab选项卡的内容中的表格宽度显示不正常 我的解决办法是在tab选项卡切换时,重载...
  • 当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理...
  • layui的面包屑或者表单不显示

    千次阅读 2018-10-23 16:56:42
    当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理...
  • layui下select下拉框不显示或没有效果

    千次阅读 2019-01-03 16:07:00
    Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖element...
  • Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖element...
  • 当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理...
  • params.pageSize = $view.find(".layui-laypage-limits option:selected").val(); params.pageNum = $view.find(".layui-laypage-em").next().html(); febs.download(ctx + 'talent/export', params, '人才信息...
  • Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同...
  • statusbar: false,//隐藏编辑器最下方版权链接 language: 'zh_CN',//汉化 convert_urls: false,//不自动处理url,插入什么就是什么.不会自动转换相对或绝对路径 // relative_urls : true, images_upload...
  • 解决百度地图API居中显示

    千次阅读 2020-01-08 11:28:18
    百度地图API中心点不是居中显示,而是显示在左上角 地图所在的div处于隐藏的,中心点不是居中显示,而是...div class="layui-tab-item" style="width: 1400px; height: 600px;"> <div id="allmap" style="w...

空空如也

空空如也

1 2
收藏数 27
精华内容 10
关键字:

layui隐藏tab