layui 选项卡

最新推荐文章于 2024-04-22 13:50:02 发布

Boriscx

最新推荐文章于 2024-04-22 13:50:02 发布

阅读量926

点赞数 1

文章标签： css javascript jquery

本文链接：https://blog.csdn.net/baidu_28478823/article/details/105117171

版权

layui选项卡使用

使用layui来设置tab选项卡,选项卡布局
页面布局,需要引入layui的css和js
layui.css

<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">

页面信息

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">志邦速运供应链</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <!--            <li class="layui-nav-item"><a href=""></a></li>-->
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">列表一</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-demo-active" data-type="tabAdd" 
                        data-url="/yd-add.html" data-id="yd-add">内容一</a></dd>
                        <dd><a class="site-demo-active" data-type="tabAdd" 
                        data-url="/tihuo-add.html" data-id="tihuo-add">内容二</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-tab" lay-allowClose="true" lay-filter="tab">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

然后引入layui.js

<script src="https://www.layuicdn.com/layui/layui.js"></script>

注意js文件最好是放在页面最后,即需要先加载页面,在加载layui.js以后再进行页面渲染
关键代码

<script>
	layui.use('element', function () {
        let element = layui.element;
        let $ = layui.$;

        let active = {
        	// 添加标签
            tabAdd: function (url, id, name) {
            	// tab为标签上设置的lay-filter属性
                element.tabAdd('tab', {
                    title: name
                    , content: `<iframe width="100%" height="790px" src="${url}" 
                    	scrolling="auto" frameborder="0"></iframe>`
                    , id: id
                })
            }
            // 切换显示标签
            , tabChange: (id) => {
	            // 调用layui中element的方法
                element.tabChange('tab', id);
            }
        };

		// 添加菜单栏事件监听
		// jQuery类选择器,click表示点击事件
        $(".site-demo-active").on('click', function () {
        	// 获取被点击对象
            let dataid = $(this);
            // 判断现有tab选项卡已有卡片数量,如果小于1则直接添加
            if ($('.layui-tab-title li[lay-id]').length < 1) {
                active.tabAdd(dataid.attr('data-url'), dataid.attr('data-id'), 
                dataid.html());
            } else {
            	// 设置判断是否卡片已经存在,假定不存在
                let isData = false;
                // 遍历选项卡标题标签,这里用了jQuery的遍历方法
                $.each($('.layui-tab-title li[lay-id]'), (index, item) => {
                	// 判断遍历标签与当前标签两者id是否相同,相同者表示已经存在
                    if ($(item).attr('lay-id') === dataid.attr('data-id'))
                        isData = true;
                });
                // 如果选项卡中不存在此id,则创建
                if (isData === false) {
                    active.tabAdd(dataid.attr('data-url'), dataid.attr('data-id'), 
                    dataid.html());
                }
            }
            // 最后不管有没有新添加卡片都切换到目标卡片
            active.tabChange(dataid.attr("data-id"));
        });
    });
</script>

自此完成了选项卡的建立
主要是菜单栏中元素需要携带data-url和data-id两个属性,目的是在选项卡建立时使用

Boriscx

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
layui 选项卡

layui选项卡使用使用layui来设置tab选项卡,选项卡布局页面布局,需要引入layui的css和jslayui.css<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">页面信息<body class="layui-layout-body">...
复制链接

扫一扫