layui-点击右侧链接，跳转页面，嵌入body iframe中

最新推荐文章于 2022-07-25 22:03:27 发布
最新推荐文章于 2022-07-25 22:03:27 发布
阅读量2.8k 收藏 21
点赞数 1
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QWERTY55555/article/details/115491618
版权

说明：

目录结构如下：

一、新建index页面代码如下：

<!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="/static/layui/css/layui.css">-->
    <!--<script src="/static/layui/layui.js"></script>-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" >
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<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>控制台</a></li>
            <li class="layui-nav-item"><a>商品管理</a></li>
            <li class="layui-nav-item"><a>用户</a></li>
            <li class="layui-nav-item">
                <a>其它系统</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>
                    <img th:src="@{/img/head.png}" class="layui-nav-img">
                    吴沪欢3
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <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="navLeft">
                <li class="layui-nav-item layui-nav-itemed">
                    <a>常用功能</a>
                    <dl class="layui-nav-child">
                        <dd><a data-id="a"  href="/courseorder/list" target="content_iFrm">课程订单</a></dd>
                        <dd><a data-id="b" href="/stuinfo/list" target="content_iFrm">学员信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a>数据分析</a>
                    <dl class="layui-nav-child">
                        <dd><a>收入报表</a></dd>
                        <dd><a>学员分布图</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item">
                    <a>发布计划</a>
                    <dl class="layui-nav-child">
                        <dd><a>收入报表</a></dd>
                        <dd><a>学员分布图</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a>发布商品</a>
                    <dl class="layui-nav-child">
                        <dd><a>收入报表</a></dd>
                        <dd><a>学员分布图</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body" style="height: 100%">

        <!-- 内容主体区域 -->
        <iframe name="content_iFrm" frameborder=”no” border=”0″ class="larry-iframe"
                style="width: 100%;height: 100%;" src="/courseorder/list"></iframe>
    </div>

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

        <i class="layui-icon layui-icon-username" style="font-size: 30px; color: #1E9FFF;"></i>
    </div>
</div>
<!--<script src="/static/layui/layui.js"></script>-->
<script>
    //JavaScript代码区域
    layui.use(['element','layer'], function(){
        var element = layui.element;

    });


</script>

<style>
    .layui-tab-title {
        border: none;
    }

    .layui-tab-title li {
        background-color: #eeeeee;
        margin-left: 10px;
    }

    .layui-tab-title .layui-this {
        background-color: #009688;
        color: white;
    }

    .layui-tab-title .layui-this:after {
        content: none;
    }
</style>

</body>
</html>

二、新建list.html跳转页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" >
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function(){
        var table = layui.table;

        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            elem: '#test'
            ,url:'/courseorder/listJson'
            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,totalRow: true
            ,cols: [
                [
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                ,{field:'name', title:'名字', width:120}
                ,{field:'wechat_mark', title:'微信备注', width:120}
                ,{field:'wechat_no', title:'微信id', width:120}
                ,{field:'qq_no', title:'QQ号', width:120}
                ,{field:'course_name', title:'购买课程', width:120}
                ,{field:'course_price', title:'价格', width:120}
                ,{field:'order_date', title:'订单日期', width:120}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]
            ]
            ,page: true
            ,limit:7
            ,limits:[7,8,9,10]
        });

        //工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
                case 'add':
                    // layer.msg(checkStatus.isAll ? '全选': '未全选')
                    parent.layer.open({
                        type:2,//2 跳转到页面
                        offset: 'auto',
                        title:'添加课程订单',
                        content:'/courseorder/add',
                        area: ['1000px', '600px'],
                        btn:'关闭全部',
                        btnAlign:'c',
                        yes:function () {
                            parent.layer.closeAll();
                        }
                    });
                    break;
            };
        });
        //触发行双击事件
        table.on('rowDouble(test)',function(obj){
            //obj 同上
            console.log(obj);
            console.log(obj.data);
             console.log(obj.data.order_id);
        //      var orderid = obj.data.order_id;
        //     parent.layer.open({
        //         type:2,//2 跳转到页面
        //         offset: 'auto',
        //         title:'课程订单详情页',
        //         content:'/courseorder/detail?order_id='+orderid,
        //         area: ['1000px', '600px'],
        //         btn:'关闭全部',
        //         btnAlign:'c',
        //         yes:function () {
        //             parent.layer.closeAll();
        //         }
        //     });
        });


    });
</script>

</body>
</html>

三、

单页面效果

点击右侧按钮，嵌入效果如下：

wuhuhuan
关注
  • 1
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
php左侧导航右侧tab标签,使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果...
weixin_39559333的博客
03-21 704
用了layui框架1.home.html主界面：首页后台管理角色管理账号管理© layui.com - 底部固定区域layui.use('element', function(){var $ = layui.jquery,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块//触发事件var active = {tabAdd: func...
js layui跳转页面_解决layer弹出层的内容页点击按钮跳转到新的页面问题
weixin_33716865的博客
12-28 6639
在参与的一个项目中，有一个这样的需求，导入基础数据成功后，默认弹出一个管理员登录页，点击登录按钮，需要跳到管理页面。导入页按钮：导入导入按钮的点击事件，点击后会出现layer弹出层$("#start").click(function(){// 判断有没有选择区域var regionCode = $("#regionCode").val();if(regionCode!=0){// 获取区域名，用于...
layuimini框架中点击顶部导航栏跳转到指定模块首页
m0_61236764的博客
07-25 3595
在参与的一个后台项目开发中使用到了layuimini后台模板框架，其中有三个后台模块，现在需要实现的功能是点击顶部导航栏就会跳转到对应模块的首页。作为一名小白，研究这个问题需要想到的是点击左侧页面菜单栏能进行定向跳转，是如何实现的，在导航栏进行复用就行。于是需要改动layuimini的miniMenu.js,添加以下代码以实现功能。在左侧菜单栏中是存在layuimini-href，这大概是跳转的问题所在。...
layui跳转html如何带参数,layui页面跳转，带参数，跳到指定页laypage.render
weixin_28862967的博客
06-08 1315
list = new List();StringBuilder builder = new StringBuilder();builder.Append("SELECT * FROM ( ");builder.Append(" SELECT ROW_NUMBER() OVER (");if (!string.IsNullOrEmpty(orderby.Trim())){builder.Append...
layui点击左侧导航栏在右侧body显示_Flutter路由导航
weixin_39531229的博客
11-20 788
我们通常会用屏（Screen）来称呼一个页面（Page），一个完整的App应该是有多个Page组成的。 在之前的案例（豆瓣）中，我们通过IndexedStack来管理了首页中的Page切换： 首页-书影音-小组-市集-我的 通过点击BottomNavigationBarItem来设置IndexedStack的index属性来切换 除了上面这种管理页面的方式，我们还需要实现其它功能的页面跳转：...
使用iframe实现点击导航无刷新切换页面
10-11
在网页设计中，为了提供更好的用户体验，我们常常需要在用户点击导航链接时，不重新加载整个页面而是仅替换部分内容。这种技术可以借助`iframe`（Inline Frame）元素来实现。`iframe`允许我们在一个HTML文档中嵌入另...
在iframe 中页面中设置遮罩遮罩层
08-03
本话题将详细讲解如何在iframe中实现页面的遮罩层功能，结合`right.html`, `main.html`, `left.html`, `top.html`这四个文件，我们可以构建一个具有完整布局的页面，并在其中嵌入iframe来实现遮罩层。 首先，我们...
Django 在iframe里跳转顶层url的例子
09-18
在某些场景下，我们可能需要在页面中使用iframe来嵌入其他页面，如登录页面。然而，当用户在iframe内完成特定操作，比如登录成功后，有时我们需要将页面跳转到顶层窗口，而不是继续在iframe内显示。本文将详细介绍...
ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
01-20
`iframe`，即内联框架，常用于在单一HTML文档中嵌入其他网页内容，实现页面组件的复用。然而，iOS系统对`iframe`的处理方式与Android存在差异，导致在某些情况下，如弹框定位、页面滚动等方面可能出现问题。 标题所...
JS iFrame加载慢怎么解决
01-19
在项目中经常要动态添加iframe，然后再对添加的iframe进行相关操作，有时候会遇到iframe加载很慢什么原因呢，该如何解决呢？带着这个问题一起通过本文学习，寻找答案吧！ aaa.html <HTML> <HEAD> <...
layui实现左侧菜单点击右侧内容区显示
10-16
主要为大家详细介绍了layui实现左侧菜单点击右侧内容区显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实现layui左侧菜单右侧显示页面内容的静态文件
10-26
实现layui左侧菜单右侧显示页面内容的静态文件,可查看对应的教程地址
使用layui实现从商品展示跳转到商品详情页，上一页html跳转到另外一页html，前端值在页面之间的传递
Android_la的博客
03-23 5859
一. 问题背景 点击商品展示页，能另外打开新标签跳转到商品详情页，效果如下： 前台：使用到的页面全是html没有jsp，所以这里是在html之间传值，从商品展示页传递商品id到商品详情页 二. 解决方案 2.1 思路 给<a>绑定onclick事件 定义一个处理跳转的函数 2.2 关键代码 最最最最最关键的是window.open('xxxxxxxxxxxxx.htm...
Layui admin 点击按钮跳转到指定Tab页
weixin_45384584的博客
06-15 1207
Layui admin 点击按钮跳转到指定Tab页 //url:跳转的界面 //title:跳转的标题 //id: tab的lay-id parent.layui.index.openTabsPage(url, title, id);
Layui 点击表格单元格跳转链接
peipei的博客
07-20 6328
点击表格的订单数跳转链接，参数：表格的时间段，页面上的一个值 第一种.参数：想要参数的接口里都有 //表格 <table class="layui-inline" lay-filter="table" id="cardList"></table> //跳转 <script type="text/html" id="usernameTpl"> <a href="/order/index?shopname={{d.id}}" class="layui-ta
Layui之动态选项卡&iframe使用
qq_65345936的博客
07-18 1717
Layui之动态选项卡&iframe的使用
layui跳转html如何带参数,00038-layui 打开新页面，并通过url带参数，在新页面获取url的参数...
weixin_31567239的博客
06-08 587
打开的页面为一个页签top.layui.index.openTabsPage('business/businessUserShow.jsp#/self=1','个人信息')businessUserShow.jsp:layui.config({base: '${ctxLayui}/layuiadmin/'}).extend({index: 'lib/index'}).use(['index', 'f...
微信小程序解决“navigator不能直接跳转到tabBar页面”的问题
飞翔的小白
11-25 5245
问题分析： 在微信小程序index.wxml中想在页面上使用navigator跳转到pages下的另一个页面，结果发现点击没有任何反应。原因是目标页面在tabBar设置里，想跳转到tabBar页面，需要使用switchTab功能。 解决方法一： navigator 的 open-type 设置为 switchTab <navigator url="/pages/service/service" open-type='switchTab' > <view>汽车服务&lt
layui页面跳转，带参数，跳到指定页laypage.render
热门推荐
小熊猫
06-12 1万+
JS部分 <script> var layer, form, laypage, index, newindex, laydate; var pageIndex = 1; var pageSize = 1;//页大小10 var total; //总条数 var SearchId = "0"; $(function () { layui.use(['layer', 'f
iframe实现微服务页面跳转
最新发布
08-25
使用 `<iframe>` 元素可以在页面上嵌入其他网页内容，实现微服务页面跳转。以下是一个基本的示例： ```html <!DOCTYPE html> <html> <head> <title>微服务页面跳转</title> </head> <body> <h1>微服务页面跳转示例</h1> <iframe src="https://example.com" width="100%" height="500px" frameborder="0"></iframe> <h2>其他内容</h2> <p>这里可以添加其他页面内容。</p> </body> </html> ``` 在这个示例中，我们使用 `<iframe>` 元素将 `https://example.com` 这个网页嵌入到当前页面中。你可以替换 `src` 属性的值为你想要嵌入的微服务页面的链接。通过设置 `width` 和 `height` 属性，你可以控制嵌入页面的尺寸。`frameborder` 属性用于控制边框的显示，设置为 "0" 可以去除边框。 请注意，由于跨域安全策略的限制，如果嵌入的页面与当前页面不属于同一个域名，可能会出现安全性问题。在这种情况下，你可能需要在目标页面上配置适当的跨域资源共享（CORS）头部或使用其他方法来解决跨域问题。 希望这个示例对你有帮助！如有其他问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值