动态添加layui中的tab选项卡

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>基本信息</title><link rel="stylesheet" href="/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin"><div class="layui-side layui-bg-black" style="top:0px;background-color: #33b7b1!important;"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" style="background-color: #33b7b1!important;color: white;"><li class="layui-nav-item"><a data-url="/information/getCarInformation" data-id="classInformation" data-title="班级信息" class="site-demo-active"  href="javascript:;" data-type="tabAdd">班级信息</a></li><li class="layui-nav-item"><a data-url="/information/getUserInformation" data-id="gradeInformation" data-title="年级信息" class="site-demo-active"  href="javascript:;" data-type="tabAdd">年级信息</a></li><li class="layui-nav-item"><a data-url="/information/getRoleInformation" data-id="studentInformation" data-title="学生信息" class="site-demo-active"  href="javascript:;" data-type="tabAdd">学生信息</a></li></ul></div></div><div class="layui-body" style="top:0px"><!-- 内容主体区域 --><div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true"><ul class="layui-tab-title"><li class="layui-this" lay-id="classInformation ">班级信息</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show"><iframe src="/information/getclassInformation " scrolling="no" frameborder="0"  ></iframe></div></div></div></div><div class="layui-footer"><!-- 底部固定区域 -->© layui.com - 底部固定区域</div>
</div>
<script src="/js/layui.js"></script>
<script>//JavaScript代码区域layui.use('element', function(){var element = layui.element;var $ = layui.jquery;//触发事件var active = {//在这里给active绑定几项事件，后面可通过active调用这些事件tabAdd: function(url,id,name) {//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分element.tabAdd('demo', {title: name,content: '<iframe data-frameid="'+id+'" scrolling="no" frameborder="0" src="'+url+'" style="width:100%;"></iframe>',id: id //规定好的id})element.render('tab');},tabChange: function(id) {//切换到指定Tab项element.tabChange('demo', id); //根据传入的id传入到指定的tab项},tabDelete: function (id) {element.tabDelete("demo", id);//删除}, tabDeleteAll: function (ids) {//删除所有$.each(ids, function (i,item) {element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除})}};//当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件$('.site-demo-active').on('click', function() {var dataid = $(this);//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目if ($(".layui-tab-title li[lay-id]").length <= 0) {//如果比零小，则直接打开新的tab项active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));} else {//否则判断该tab项是否以及存在var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有$.each($(".layui-tab-title li[lay-id]"), function () {//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开if ($(this).attr("lay-id") == dataid.attr("data-id")) {isData = true;}})if (isData == false) {//标志为false 新增一个tab项active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));}}//最后不管是否新增tab，最后都转到要打开的选项页面上active.tabChange(dataid.attr("data-id"));});});
</script>
</body>
</html>

动态添加layui中的tab选项卡相关推荐

ViewPager+Fragment实现TabHost，Fragment动态添加、删除，Tab选项卡跟随滑动
效果图: 代码功能: (1)用ViewPager+Fragment实现TabHost,ViewPager的每一个Page均是Fragment.ViewPager中的Fragment可以动态添加.删除. ...
动态创建数据表php,PHP实现动态添加XML中数据的方法
本文实例讲述了PHP实现动态添加XML中数据的方法.分享给大家供大家参考,具体如下: 前面简单讲述了xml文档的创建,这里继续讨论xml中数据的动态添加: 一. 代码 class Message_XM ...
layui option 动态添加_layui中select的change事件、动态追加option
说明:layui中用jquery 中的选择器例如$('#id').change(function(){})发现不起作用 layui操作:lay-felter标识操作哪个select html部分: 请 ...
如何动态为 tabstrip 中的 tab 页签指定标题
网上居然搜不到相关的文章,所以我来写一篇吧. 其实就是两个要点,只要注意就行了. 首先,最重要的一点,在绘制屏幕的时候,给 tab 页签的属性指定为"输出字段",这时,它的&quo ...
android动态添加数组中,Android动态数组
我正在通过Android Pull Parser技术解析XML文件.首先,看看下面的XML文件: hello xyz abc def 考虑一下我正在解析上面的文件.现在,我的问题是我想为名称和地址创建 ...
android popupmenu 动态添加,android中PopupMenu的使用
PopupMenu可以非常方便的在指定view的下面显示一个弹出菜单,类似于actionbar溢出菜单的效果.它的菜单选项可以来自于menu资源,因此非常方便.下面是在网上找的一个PopupMenu的 ...
Unity 之 ToLua框架中UI.Dropdown组件动态添加Options
前言最近使用ToLua框架使用Unity中的Dropdown组件,其他属性都还好和在C#中使用的形式差不多,只是修改成了Lua的语法习惯就可以了,但是我有个需求,是要需要实现动态添加Dropdown ...
不能随意切换的Tab选项卡页面
不能随意切换的Tab选项卡页面 ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:20 ...
【Android UI设计与开发】第11期：顶部标题栏（二）ActionBar实现Tab选项卡和下拉导航列表
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573 在上一篇文章中,我们只是大概的了解了一下关于ActionBar ...

动态添加layui中的tab选项卡

动态添加layui中的tab选项卡相关推荐

最新文章

热门文章