layui后台框架点击子页面按钮时添加顶部tap栏

layui后台框架点击子页面按钮时添加顶部tap栏

1.封装的子页面代码

  function addtap(ele){
        layui.use(['jquery', 'element', 'layer'], function() {
                var $ = layui.jquery, element = layui.element, layer = layui.layer;
                // $('.layui-tab-content').height($(window).height() - 145);
                var tab = {
                    add: function(title, url, id) {
                    window.parent.layui.element.tabAdd('hisiTab', {
                            title: title,
                            content: '<iframe width="100%" height="100%" lay-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>',
                            id: id
                        });
                    }, change: function(id) {
                        window.parent.layui.element.tabChange('hisiTab', id);
                    }
                };
                $(ele).click(function(event) {
                    var that = $(this), iframe = $('iframe[src="'+that.attr('href')+'"]');
                    let istap=false;
                    $.each($(".layui-tab-title li[lay-id]",window.parent.document),function(){
                        // console.log("tap栏id",$(this).attr("lay-id"));
                        // console.log("按钮id",that.attr("data-id"));
                        if($(this).attr("lay-id")==that.attr("data-id")){
                            istap=true
                        }
                    })
                    console.log(istap);
                    if(istap){
                            iframe.prop('src', iframe.attr('src'));
                              tab.change(that.attr('data-id'));
                                event.stopPropagation();
                                return false;
                    }
                    // if (iframe[0]) {
                    //     iframe.prop('src', iframe.attr('src'));
                    //     tab.change(that.attr('data-id'));
                    //     event.stopPropagation();
                    //     return false;
                    // }

                    // if (!that.hasClass('top-nav-item')) {
                    //     that.css({color:'#fff'});
                    // }
                    tab.add(that.text(), that.attr('href'), that.attr('data-id'));
                    tab.change(that.attr('data-id'));
                    event.stopPropagation();
                    return false;
                });

                // $(document).on('click', '.layui-tab-close', function() {
                //     $('.layui-nav-child a[data-id="'+$(this).parent('li').attr('lay-id')+'"]').css({color:'rgba(255,255,255,.7)'});
                // });
            });
    }
      function deltap(ele,close=""){
        layui.use(['jquery', 'element', 'layer'], function() {
                var $ = layui.jquery, element = layui.element, layer = layui.layer;
                // $('.layui-tab-content').height($(window).height() - 145);
                var tab = {
                  tabDelete: function(othis){
                        //删除指定Tab项
                        window.parent.layui.element.tabDelete('hisiTab', othis);
                    }
                };
                $(ele).click(function(event) {
                     tab.tabDelete(close);
                });
            });
    }

• 如果需要在子页面点击关闭按钮时控制关闭当前tap，调用deltap(el,id)传入类名与要关闭的id*

2.调用方法（传入类名即可）

<script src="/static/js/addtap.js"></script>
<script type="text/javascript">
   addtap('.zdybnt')
</script>

注意：按钮上需要携带的参数为下面这样，需要携带data-id与href，标签无所谓

<button data-id="12354" class="zdybnt" href="/admin.php/jigou/staff/index.html">打开新页面</button>