监听导航新增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( ...
随机推荐
- 构建前端gulp自动化
看了很多关于Gulp自动化的相关教程,很感谢大神们的教程, 因为担心自己会忘记啥的,所以就把自己搭建gulp自动化的过程记录下来~~~ gulp是依赖于Nodejs的,所以最好是有点nodejs的基础 ...
- 我去年码了个表(WPF MvvM)
又快个把月没写博客了(最近忙着学JAVA去了,都是被逼的/(ㄒoㄒ)/~~),然后用WPF码了个表,其实想加上那种提醒功能什么的,额,就这样了吧,主要是感受一下数据驱动的思想. 效果如下: 前端XAM ...
- eclipse 常用配置
一.内置tomcat配置 解决eclipse 内置tomcat 与本地tomcat 端口冲突 传送门:http://www.cnblogs.com/tweet/p/7568979.html 二.字体设 ...
- 实现h5中radio单击取消与选中
<input type = "radio" id = "raid" name = "raname" checked = 'checke ...
- linux 下mysql服务的管理
一.mysql服务的管理 1.1 mysql启动与关闭 linux下启动mysql: /etc/init.d/mysqld start 关闭进程: ps -ef | grep mysql 找到进程号 ...
- Liunx 简单的命令说明
cd命令在linux中用来切换或者进入目录,路径还分为相对路径和绝对路径 cd 命令:切换当前目录至其他目录 cd /:加上斜杠表示是进入到根目录. pwd命令:查看当前路径. ()cd 进入用户主目 ...
- Python之参数类型、变量
一.参数类型 (一)形参与实参 要使用局部变量时,只能通过return的方式返回 def my(name): #函数体 return name my('lrx') #name是形参,lrx是实参 不写 ...
- package-lock.json和package.json的作用
转自:https://www.cnblogs.com/cangqinglang/p/8336754.html package-lock.json的作用就是锁定安装依赖时包的版本,并且需要上传到git, ...
- C# Note5:使用相对路径读取文件
一.C#中使用相对路径读取配置文件 一般Solution的目录结构如下图所示: (如过看不到某些文件,可以点击 “显示所有文件” 图标) 方法一:由于生成的exe文件在bin\debug目录下,可以使 ...
- Dart语法基础
hello world // Define a function. printNumber(num aNumber) { print('The number is $aNumber.'); // Pr ...