监听导航新增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( ...
随机推荐
- BZOJ1061 NOI2008 志愿者招募 线性规划、费用流
传送门 一道思路很妙的线性规划网络流 设\(X_i\)表示第\(i\)天需要的人数,\(P_i\)表示第\(i\)种人雇佣的个数 那么我们可以列出一系列式子 比如说样例就可以列出三个式子: \(P_1 ...
- xxtea---单片机数据加密算法
转:https://www.cnblogs.com/LittleTiger/p/4384741.html 各位大侠在做数据传输时,有没有考虑过把数据加密起来进行传输,若在串口或者无线中把所要传的数据加 ...
- JS 格式化时间(获取两个日期之间的每一天、每一月、每半小时、每一秒)
时间戳转换为时间 // 时间戳转换为时间 function timestampToTime(timestamp, isMs = true) { const date = new Date(timest ...
- ML.NET 示例:回归之价格预测
写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...
- @vue/cli 3 运行支持报错 socket
问题 /sockjs-node/info 无限报错 解决方案 原因是相关代理端不支持 ws,因此需要在代理处关闭 ws,即 ws: false,如下: vue.config.js const ds_p ...
- 深入理解Redis高可用方案-Sentinel
Redis Sentinel是Redis的高可用方案.是Redis 2.8中正式引入的. 在之前的主从复制方案中,如果主节点出现问题,需要手动将一个从节点升级为主节点,然后将其它从节点指向新的主节点, ...
- 第十二次oo作业
作业十二 规格化设计简介 规格化设计的发展历史 1950年代,第一次分离,主程序与子程序的分离结构是树状模型,子程序可先于主程序编写.通过使用库函数来简化编程,实现最初的代码重用.产生基本的软件开发过 ...
- hibernate操纵数据库常用方法 及 hibernate对象的三种状态
在dao层使用hibernate语言来与数据库进行访问,hibernate作为面向对象思想开发的dao层框架其理解也需要以面向对象的思想来看待 使用.hibernate不仅支持使用者使用他提供的对象来 ...
- debian中完全删除mysql
参考自:http://www.jb51.net/article/50884.htm 之前实验室的人说找不到完全删除已安装的mysql-cluster的方法,我当时没在意,今天不得不删除他之前安装的my ...
- 【学习总结】Master课程 之 虚拟化与云计算
Section 1- Cloud Computing Introduction-云计算介绍 1-What can Cloud Computing do? - 云计算可以做什么? 服务模式:美国国家标准 ...