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. BZOJ3561 DZY Loves Math VI 莫比乌斯反演

    传送门 看到\(gcd\)相关先推式子(默认\(N \leq M\)): \(\begin{align*} \sum\limits_{i=1}^N \sum\limits_{j=1}^M (lcm(i ...

  2. EF CRUD

    EF 使用心得 有点傻逼! 1.通常情况 表实例一个对象 T_User model = new T_User(); 2.关键 非空字段赋值主键必须要写 model.EID = "009&qu ...

  3. Shiro安全框架入门笔记

    入门 1.simpleRealmTest package cn.realm; import org.apache.shiro.SecurityUtils; import org.apache.shir ...

  4. 朱晔的互联网架构实践心得S1E3:相辅相成的存储五件套

    朱晔的互联网架构实践心得S1E3:相辅相成的存储五件套 [下载本文PDF进行阅读] 这里所说的五件套是指关系型数据库.索引型数据库.时序型数据库.文档型数据库和缓存型数据库. 上图显示了一套读写服务搭 ...

  5. 内网IP外网IP的关联及访问互联网原理

    首先解释一下“内网”与“外网”的概念: 内网:即所说的局域网,比如学校的局域网,局域网内每台计算机的IP地址在本局域网内具有互异性,是不可重复的.但两个局域网内的内网IP可以有相同的. 外网:即互联网 ...

  6. [Loadrunner参数化]一个文件输两列参数的取值

    关于LoadRunner参数化的内容,在脚本开发中属于非常重要的一个知识点.关于这部分知识,在书上和网上到处都能找到,本篇只讲一种特殊情况:一个参数化文件为File类型,有多列值,如何进行参数化取值. ...

  7. 二十二:制作app的时候超出部分不能滑动

    给需要滑动的区域写以下样式(父级是浏览器) position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow-x: hidden; ...

  8. Python-类的绑定方法与非绑定方法

    类中定义的函数分成两大类 一:绑定方法(绑定给谁,谁来调用就自动将它本身当作第一个参数传入): 绑定到类的方法:用classmethod装饰器装饰的方法. 为类量身定制 类.boud_method() ...

  9. 单例模式及设计url分发

      1.单例模式 2.admin源码解析 3.注册源码流程图 3.admin之url方法的使用 4.admin源码之url设计 5.设计url源码流程 6.总结 1.单例模式 https://www. ...

  10. StackWalk64

    #include <Windows.h>   #define  PULONG_PTR ULONG** #define  PULONG ULONG* #define  ULONG_PTR U ...