1. 加载element模块
2. 监听导航事件
3. 创建选项卡
 //加载element模块
layui.use('element', function () {
element = layui.element
//监听导航事件
element.on('nav(nav)',function(e){
var con = e.text();
var tabId = e.children('a').attr("hid");
var url = e.children('a').attr("url");
createTab(tabId, con , url);
})
})
//创建选项卡
function createTab(tabId, con , url) {
var lis = [];
$("#tabList #nav li").each(function () {
lis.push($(this).attr("lay-id"));
})
if (lis.length <= 0 || lis.indexOf(tabId) == -1) {
element.tabAdd('docDemoTabBrief', {
title: con,
content: createIframe(url),
id: tabId
});
}
//切换选项卡(不需要写else)
element.tabChange('docDemoTabBrief', tabId);
}
//加载窗体
function createIframe(url){
return '<iframe src="'+url+'" style="width:100%;height:100%;" frameborder="0" ></iframe>'
}

监听导航新增Tab选项卡-layui的更多相关文章

  1. 2020-2-27今日总结——滚动监听&导航

    利用Bootstrap 开发工具实现滚动监听 (此文只做学习路上的归纳分享总结用,如有侵权,请联系我删除) 使用滚动监听,比较特殊,要在body中设置scroll,以及触点. 很好理解,因为滚动是多对 ...

  2. H+ 添加(新增)Tab选项卡

    //注:在contabs.js文件中 $(function () { }); 方法外 加入//注: data-name="' + menuName + '" 这句是加入的自定义属性 ...

  3. jq滚动监听-导航滚动

    github地址:https://github.com/yutaogege/jquery.nav.js 代码: <!DOCTYPE html> <html> <head& ...

  4. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  5. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  6. 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件

    [源码下载] 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebVi ...

  7. 作业调度框架Quartz.NET-现学现用-02-任务监听

    原文:作业调度框架Quartz.NET-现学现用-02-任务监听 前言 任务调度系统并不是完美的,它会出现任务执行失败的情况.如果你需要处理任务失败后的逻辑,希望这篇笔记可以为你提供些帮助. Quar ...

  8. 作业调度框架Quartz.NET-现学现用-02-任务监听 - 简书

    原文:作业调度框架Quartz.NET-现学现用-02-任务监听 - 简书 前言 任务调度系统并不是完美的,它会出现任务执行失败的情况.如果你需要处理任务失败后的逻辑,希望这篇笔记可以为你提供些帮助. ...

  9. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

随机推荐

  1. BZOJ3489 A simple rmq problem K-D Tree

    传送门 什么可持久化树套树才不会写呢,K-D Tree大法吼啊 对于第\(i\)个数,设其前面最后的与它值相同的位置为\(pre_i\),其后面最前的与它值相同的位置为\(aft_i\),那么对于一个 ...

  2. CF1103D Professional layer 状压DP

    传送门 首先对于所有数求gcd并求出这个gcd含有的质因子,那么在所有数中,只有这一些质因子会对答案产生影响,而且对于所有的数,每一个质因子只会在一个数中被删去. 质因子数量不会超过\(11\),所以 ...

  3. Java8之使用Optional进行Null处理

    Optional类这是Java 8新增的一个类,用以解决程序中常见的NullPointerException异常问题,本篇文章将详细介绍Optional类,以及如何用它消除代码中的null检查. 1. ...

  4. Java多线程编程核心技术(二)对象及变量的并发访问

    本文主要介绍Java多线程中的同步,也就是如何在Java语言中写出线程安全的程序,如何在Java语言中解决非线程安全的相关问题.阅读本文应该着重掌握如下技术点: synchronized对象监视器为O ...

  5. 面试 10:玩转 Java 选择和插入排序,附冒泡最终源码

    昨天给大家讲解了 Java 玩转冒泡排序,大家一定觉得并没有什么难度吧,不知道大佬们玩转了吗?不知道大家有没有多加思考,实际上在我们最后的一种思路上,还可以再继续改进. 我们先看看昨天最终版本的代码. ...

  6. java连接Mysql8

    相较于之前版本会有部分改动 pom依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql- ...

  7. OO博客作业2:第5-7周作业总结

    (1)从多线程的协同和同步控制方面,分析和总结自己三次作业来的设计策略及其变化. 第5次作业:多线程电梯 基本照搬了课件上“生产者-消费者”模型的设计策略,将InputHandler设计为生产者线程, ...

  8. BFC 原理

    BFC:Block-level box           +   Forating  +           Context; ------->块元素          决定其子元素如何定位, ...

  9. A. Chess Placing

    链接 [https://codeforces.com/contest/985/problem/A] 题意 给你一个偶数n,输入n/2个数,代表棋子的位置,有一个1*n的棋盘是黑白相间的 问你使得所有棋 ...

  10. NET 使用 RabbitMQ

    NET 使用 RabbitMQ 前言 最近项目要使用RabbitMQ,园里里面已经有很多优秀的文章,Rabbitmq官网也有.net实例.这里我尝试下图文并茂之形式记录下使用的过程. 安装 Rabbi ...