layui实操记录

 1. 切换选项卡的方法

0511.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面名称 -->
    <title>layui实操</title>
    <!-- 通过第三方CDN方式引入 -->
    <!-- 通过第三方CDN方式引入 layui.css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.2/css/layui.min.css" rel="stylesheet">
    <!-- 通过第三方CDN方式引入 layui.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.2/layui.min.js"></script>
    <!-- 设置图标与文字的间隔 -->
    <style>
        .iconset{
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="layui-layout-admin">
        <!-- 头部开始 -->
        <div class="layui-header">
            <!-- 左侧 logo样式 (layui中默认的是绿色)-->
            <div class="layui-logo">LOGO</div>
            <!-- 右侧 登录信息 (含下拉) -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">Betsy</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!-- 头部结束 -->

        <!-- 左侧导航开始 -->
        <div class="layui-side" style="background-color:#222222;">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right:10px;">
                    <!-- layui-nav-itemed表示item选中呈展开状 -->
                    <li class="layui-nav-item layui-nav-itemed">
                        <!-- javascript:;一定要注意加上,不然点击样式出不来 -->
                        <a href="javascript:;"><i class="layui-icon layui-icon-set iconset"></i>栏目1</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-type="toAdd" class="subMenu" data-id="1" data-title="栏目1-1" data-url="test1-1.html">
                                    栏目1-1
                                </a>
                            </dd>
                        </dl> 
                    </li>
                    <li class="layui-nav-item">
                        <!-- iconset是自定义的,用来设置:图标和文字之间的距离 -->
                        <a href="javascript:;"><i class="layui-icon layui-icon-read iconset"></i>栏目2</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-type="toAdd" class="subMenu" data-id="2" data-title="栏目2-1" data-url="test2-1.html">栏目2-1</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-type="toAdd" class="subMenu" data-id="3" data-title="栏目2-2" data-url="test2-2.html">栏目2-2</a>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>    
        </div>
        <!--左侧导航结束  -->

        <!-- 中间主体开始 -->
        <div class="layui-body" id="container">
            <div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
                <ul class="layui-tab-title"></ul>
                <div class="layui-tab-content"></div>
            </div>
        </div>
        <!-- 中间主体结束 -->

        <!-- 底部开始 -->
        <div class="layui-footer">
            <center>XXX版权所有</center>
        </div>
        <!-- 底部结束 -->
    </div>

    <!-- js 添加点击响应 -->
    <script>
        layui.use(['element'], function() {
            var element = layui.element;
            var $ = layui.$;
            //左侧导航栏
            $('.subMenu').on('click', function() {
                var dataid = $(this);
                //1. 判断.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
                //如果比零小,则直接打开新的tab项
                if ($(".layui-tab-title li[lay-id]").length <= 0) 
                {
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                } 
                //2. 否则判断该tab项是否在.layui-tab-title存在
                else 
                {
                    //初始化一个标志,为false说明未打开该tab项 为true则说明已有
                    var isData = false; 
                    //遍历layui-tab-title已经存在的tab
                    $.each($(".layui-tab-title li[lay-id]"), function() {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) 
                        {
                            isData = true;
                        }
                    });
                    //标志为false 新增一个tab项
                    if (isData == false) 
                    {
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                    }
                }
                //3. 不管是否新增tab,最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));
            });

            //计算iframe的大小
            function FrameWH() {
                var h = $(window).height();
                $("iframe").css("height", h + "px");
            }

            //active对象绑定事件, 而后可通过active来调用方法
            var active = {
                //1. 新增tab项
                tabAdd: function(url, id, name) {
                    //新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
                    //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                    //tabs:中间主体的fiter名
                    element.tabAdd('tabs', {
                        title: name,
                        content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
                            '" style="width:100%;height:99%;"></iframe>',
                        id: id //规定好的id
                    })
                    FrameWH(); //计算ifram层的大小
                },
                //2. 换到指定Tab项
                tabChange: function(id) {
                    element.tabChange('tabs', id); 
                },
                //3. 删除
                tabDelete: function(id) {
                    element.tabDelete("tabs", id); 
                }
            };
        });
    </script>

</body>
</html>

test1-1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1-1</title>
</head>
<body>
    <h1>welcome to test1-1 !</h1>
</body>
</html>

test2-1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test2-1</title>
</head>
<body>
    <h1>welcome to test2-1 !</h1>
</body>
</html>

test2-2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test2-2</title>
</head>
<body>
    <h1>welcome to test2-2 !</h1>
</body>
</html>

运行结果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值