1. <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <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="carInformation" 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="userInformation" 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="roleInformation" data-title="角色信息" class="site-demo-active"  href="javascript:;" data-type="tabAdd">角色信息</a>
                    </li>
                    <li class="layui-nav-item">
                        <a data-url="/news_list" data-id="3" data-title="新闻列表" class="site-demo-active"  href="javascript:;" data-type="tabAdd">新闻列表</a>
                    </li>
                    <li class="layui-nav-item">
                        <a data-url="/news_list" data-id="3" 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="carInformation">车辆信息</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src="/information/getCarInformation" 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动态添加选项卡的更多相关文章

  1. JAVAEE——BOS物流项目02：学习计划、动态添加选项卡、ztree、项目底层代码构建

    1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree( ...

  2. layui动态添加的元素click等事件触发不了的解决办法

    在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(" ...

  3. layui 动态添加 表格数据

    静态表格: <table class="layui-table" id="table" lay-filter="table"> ...

  4. WPF实现选项卡效果（2）——动态添加AvalonDock选项卡

    原文:WPF实现选项卡效果(2)--动态添加AvalonDock选项卡 简介 在前面一篇文章里面,我们使用AvalonDock实现了类似于VS的选项卡(或者浏览器的选项卡)效果.但是我们是通过xaml ...

  5. layui js动态添加的面板不能折叠

    layui 动态添加dom后一般调用 layer.form.render()更新dom就可以了,但是我动态添加一个面板后form.render()就没有效果,要用layui.element.rende ...

  6. Layui表格之动态添加数据（表格多选解决方案）

    前言: Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听.效果是这样: 实现监听的代码如下,这是一种解决选择多条数据的方案: table.on('edi ...

  7. WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容

    原文:WPF实现选项卡效果(3)--自定义动态添加的AvalonDock选项卡内容 简介 在前面一篇文章里面,我们实现了AvalonDock选项卡的动态添加,但是对于选项卡里面的内容,我们并没有实现任 ...

  8. EasyUI两种动态添加tab Iframe页面的方法

    /** 动态添加tab-----方式一 **/ function addIframeTab(titleTxt,href,icon) { $('#mytabs').tabs('addIframeTab' ...

  9. jQuery如何获取动态添加的元素

    1. 使用 on()方法        本质上使用了事件委派,将事件委派在父元素身上     自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...

随机推荐

  1. Hadoop 2.6.1 集群安装配置教程

    集群环境: 192.168.56.10 master 192.168.56.11 slave1 192.168.56.12 slave2 下载安装包/拷贝安装包 # 存放路径: cd /usr/loc ...

  2. 2020重新出发，MySql基础，MySql字符集

    目录 MySQL字符集和校对规则详解 MySQL字符集的转换过程 MySQL查看字符集和校对规则 MySQL设置默认字符集和校对规则 服务器字符集和校对规则 数据库字符集和校对规则 表字符集和校对规则 ...

  3. 源码浅入浅出 Java ConcurrentHashMap

    从源码的角度深入地分析了 ConcurrentHashMap 这个线程安全的 HashMap,希望能够给你一些帮助. 老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程 ...

  4. AndroidStudio中利用git下载github或者git.oschina的代码时报错：repository test has failed解决方法

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing AndroidS ...

  5. Jmeter4.0安装教程

    1. 检查安装环境 1.1 Jdk要求 JDK版本:1.6+ 1.2 检查是否安装JDK win  +  R  快捷键打开运行,输入cmd 打开面板,在面板中输入  java -version,出现如 ...

  6. FastDFS+nginx整合模块安装

    FastDFS安装 安装gcc编译器 yum -y install gcc automake autoconf libtool make 上传解压两个文件包 libfastcommon是从FastDF ...

  7. C014：不用算术分割显示逆序三位数

    程序: #include "stdafx.h" int _tmain(int argc, _TCHAR* argv[]) { int handred,ten,ge; do{ pri ...

  8. 转载：MYSQL数据库三表联查的SQL优化过程

    地址:https://database.51cto.com/art/202002/609803.htm 作者用了三张有设计缺陷的表做例子,使得优化效果空前,优化手段仅为拨乱反正和加索引,此行可为一哂.

  9. C# 读取 ttf字体文件里的 Unicode

    因为爬虫要解析 &#x880cc这种字体编码的值,下载到一个ttf文件,用百度字体编辑器 打开,可以看到每个字符对应的Unicode (数字下方 $23.$2A...这些), 我需要拿到这些映 ...

  10. Win10更新后蓝牙出现故障的解决方法

    昨天Win10自动更新后,我发现我的键盘突然就不管用了,检查了一下发现原来蓝牙没有打开,同时任务栏中的蓝牙图标也不见了. 不久之前,这样的情况已经出现过了一次,那次好像更新系统后就好了,但这次是系统更 ...