监听导航新增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( ...
随机推荐
- java 基础03 继承
- 很详细全部的WinDbg学习资料
[ 分类 ]- windbg - hgy413的专栏(﹎゛Never Give Up Your Dream ..ヽ..) - CSDN博客 .
- 纯手写AJAX
function ajax(){ //http相应对象 var xmlhttp; //判断浏览器 if(window.XMLHttpRequest){ xmlhttp = new XMLHttpReq ...
- java.util.Stack类中 empty() 和 isEmpty() 方法的作用
最近在学习算法和数据结构,用到Java里的Stack类,但程序运行结果一直和我预料的不一样,网上也没查清楚,最后查了API,才搞明白. java.util.Stack继承类 java.util.Vec ...
- 二十:让行内元素在div中垂直居中
(1)使用display:table-cell配合vertical-align:center(淘宝也是这样用的) <div class="method4"> <s ...
- 最小的N个和(堆)
描述: 有两个长度为N的序列 AB,从AB中各选一个数,可以得到N^2个和,求这N^2个和中最小的N个 输入 5 1 3 2 4 5 6 3 4 1 7 输出 2 3 4 4 5 分析: 首先限定输出 ...
- Random()种子数
Random rand =new Random(25); int i; i=rand.nextInt(100); 初始化时25并没有起直接作用,rand.nextInt(100);中的100是随机数的 ...
- 03-HTML之body标签
body标签 HTML标签按作用主要分为两类:字体标签和排版标签 HTML标签按级别主要分为两类:文本级标签和容器级标签 文本级标签:p.span.a.b.i.u.em.文本标签里只能放文字.图片.表 ...
- Elasticsearch 5.0Head插件
Elasticsearch 5.0 —— Head插件部署指南 使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! 官方 ...
- js基础语法之函数
普通函数 function foo(a, b){ return a + b; } foo(10, 20) >>> 30 匿名函数 var f = function(){console ...