监听导航新增Tab选项卡-layui
//加载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的更多相关文章
- 2020-2-27今日总结——滚动监听&导航
利用Bootstrap 开发工具实现滚动监听 (此文只做学习路上的归纳分享总结用,如有侵权,请联系我删除) 使用滚动监听,比较特殊,要在body中设置scroll,以及触点. 很好理解,因为滚动是多对 ...
- H+ 添加(新增)Tab选项卡
//注:在contabs.js文件中 $(function () { }); 方法外 加入//注: data-name="' + menuName + '" 这句是加入的自定义属性 ...
- jq滚动监听-导航滚动
github地址:https://github.com/yutaogege/jquery.nav.js 代码: <!DOCTYPE html> <html> <head& ...
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
- 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件
[源码下载] 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebVi ...
- 作业调度框架Quartz.NET-现学现用-02-任务监听
原文:作业调度框架Quartz.NET-现学现用-02-任务监听 前言 任务调度系统并不是完美的,它会出现任务执行失败的情况.如果你需要处理任务失败后的逻辑,希望这篇笔记可以为你提供些帮助. Quar ...
- 作业调度框架Quartz.NET-现学现用-02-任务监听 - 简书
原文:作业调度框架Quartz.NET-现学现用-02-任务监听 - 简书 前言 任务调度系统并不是完美的,它会出现任务执行失败的情况.如果你需要处理任务失败后的逻辑,希望这篇笔记可以为你提供些帮助. ...
- 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件
js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...
随机推荐
- [BZOJ4005][JLOI2015]骗我呢-[dp+容斥]
Description 传送门 Solution 如果单独考虑一行i,则左边位置的数严格比右边位置的数小.而一行有m个位置,它们可以填[0,m]这m+1个数,则必然有一个数不存在. 定义第i行的第j位 ...
- elf格式转换为hex格式文件的两种方法
这周工作终于不太忙了,可以写点笔记总结一下了. 之前的文章如何在Keil-MDK开发环境生成Bin格式文件,介绍了如何在Keil开发环境使用fromelf软件,将生成的axf文件转换为bin文件,这次 ...
- 警告:Establishing SSL connection without server's identity verification is not recommended
SpringBoot启东时红色警告: Mon Jun 04 00:53:48 CST 2018 WARN: Establishing SSL connection without server's i ...
- 异步时代-java的协程路在何方
面试官:你知道协程吗? 你:订机票的那个吗,我常用. 面试官:行,你先回去吧,到时候电话联系 ........ 很尴尬,但是事实是,很大一部分的程序员不知道协程是啥玩意,更大一部分的程序员,项目中没用 ...
- Mysql安装(Ubuntu)
卸载方法一: --删除mysql的数据文件 sudo rm /var/lib/MySQL/ -R --删除mysql的配置文件 sudo rm /etc/mysql/ -R --自动卸载mysql(包 ...
- c++入门之——const在函数名前面和函数后面的区别
class Test(){ public: Test(){} const int foo(int a); const int foo(int a) const; }; 一.概念 当const在函数名前 ...
- Podfile语法参考(译)
https://www.jianshu.com/p/8af475c4f717 2015.10.30 19:14* 字数 2496 阅读 35976评论 9喜欢 120 本文翻译自官方的Podfile ...
- 二、npm scripts
一.执行原理 安装npm 包,会将其package.json bin 字段添加到node_modules bin 里面,创建对应的.cmd文件,因此: 例如: "scripts": ...
- myisam和innodb的区别对比
1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...
- 安装使用阿里云的yum源
CentOS 1.备份(备份本地Yum源) mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.下 ...