layui——Tab项的添加与关闭

同事写的，我来拜读一下，顺便记录一下，哈哈

layui添加Tab项之前的，首先要引入element

这里现在实现的功能是：在主页面打开新的页面时添加Tab项，点击Tab项后面的x号时，选项卡删除，并刷新主页面，意味着新打开的页面也会被关闭。

用layui官网的例子改写的，有很多问题，以后继续改进

layui.use(['layer','element','laytpl'], function(){element.tabAdd('demo', {title: '新选项'+ (Math.random()*1000|0) //用于演示,content: '<iframe scrolling="yes" frameborder="0" src="'+path+'" style="width:100%;height:100%"></iframe>',id: "editTab"+templateId //实际使用一般是规定好的id，这里以时间戳模拟下})var r = $(".layui-tab-title").find("li");//找到主页面的该元素element.tabChange('demo', 'editTab'+templateId);r.eq(r.length - 1).children("i").on("click", function () {   //Tab项的最后一个的i元素添加点击事件//alert($(this).parent("li").attr('lay-id'));element.tabDelete("demo", $(this).parent("li").attr('lay-id'));//删除Tab项window.location.reload();})},tabDelete: function(othis){//删除指定Tab项element.tabDelete('demo', '44'); //删除：“商品管理”othis.addClass('layui-btn-disabled');},tabChange: function(){//切换到指定Tab项element.tabChange('demo', 'mainTab'); //切换到：用户管理}};
});

顺便我也找了下相关的例子，这个挺不错的，写的挺全的，推荐一下

https://www.cnblogs.com/zjc2018/p/10171191.html

layui官方参考：

https://www.layui.com/doc/modules/element.html#ontab

https://www.layui.com/admin/pro/#/component/tabs/

https://www.layui.com/demo/tab.html

layui——Tab项的添加与关闭相关推荐

关于extjs中动态添加TabPanel的tab项并以iframe显示的整理(转)
出处:http://blog.163.com/baihongtao_618/blog/static/1423479702012392948830/ 近来的项目中用到了Extjs 的TabPanel,这 ...
layui tab标签设置只读，不可手动切换外部按钮切换tab
设置只读最核心的代码只有一个 style="pointer-events: none;" 外部按钮切换tab的核心代码: 要使用layui 的element这个组件对象最外面的一 ...
layui tab html,layui竖版tab选项卡
效果图: 代码: content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, m ...
layui表格单元格添加下拉选择功能
layui表格单元格添加下拉选择功能 1.修改表头 2.更新数据 3.修改样式代码如下: <style>/*表格单元格里显示下拉框,添加后样式不对,需要自己调整一下样式使得下拉框与单元格 ...
计算机关闭开启启动程序,如何设置开机启动项？电脑开机启动项怎么增加与关闭？...
大家都知道刚买来的电脑开机速度很快,但是随着各种应用的安装,开机速度会变得非常慢,电脑也会变得异常的卡顿,这是因为有很多应用都会默认开机自启动,电脑每次开机都会依次自启动这些应用,可想而知电脑会变得多 ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
qsql 关联_QTableView与QSqlTableModel显示mysql数据库中的数据，怎么在QTableView的项中添加chekbox按钮与上拉列表啊真心求指导...
QTableView与QSqlTableModel显示mysql数据库中的数据,如何在QTableView的项中添加chekbox按钮与下拉列表啊?真心求指导. 各位大侠好,利用QTableView与 ...
Unity3D 添加与关闭窗口
游戏窗口是可以动态的添加与关闭的. 如下例:点击添加或关闭,窗口将执行添加与关闭可拖拽窗口的操作 using System.Collections; using System.Collections. ...
Win10：添加或者删除开机启动项，在开机启动项中添加在用户自定义的启动文件
介绍主要解决问题添加或者删除开机启动项(在不借助流氓软件的情况下通过自己的设置完成) 在开机启动项中添加在用户自定义的启动文件(开机启动项选项中没有存在的) 方案一 win+R,窗口中输入msco ...

layui——Tab项的添加与关闭

layui——Tab项的添加与关闭相关推荐

最新文章

热门文章