精华内容
下载资源
问答
  • layui 打开新页面,并传入参数

    万次阅读 2019-07-09 15:25:27
    layui 打开新页面,并传入参数 使用的 wangEditor 富文本编辑器不带预览的功能, ...刚好可以利用 layui 携带传参的一个特点。 效果预览: 具体代码实现为: 创建一个 preview.html 预览页面,css...

    layui 打开新页面,并传入参数

    使用的 wangEditor 富文本编辑器不带预览的功能,
    所以自己实现了下功能;
    思路是:
    点击打开一个弹窗 or 新页面,
    然后页面展示提交后前端页面看到的大概的样子。
    涉及到需要把内容传递到打开的 iframe 页面内,
    刚好可以利用 layui 携带传参的一个特点。

    效果预览:

    layui 打开新页面,并传入参数
    layui 打开新页面,并传入参数

    具体代码实现为:

    • 创建一个 preview.html 预览页面,css 样式来自 wangEditor 官方文档给出的
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>预览内容</title>
        <style>
            /* table 样式 */
            table {
                border-top: 1px solid #ccc;
                border-left: 1px solid #ccc;
            }
            table td,
            table th {
                border-bottom: 1px solid #ccc;
                border-right: 1px solid #ccc;
                padding: 3px 5px;
            }
            table th {
                border-bottom: 2px solid #ccc;
                text-align: center;
            }
    
            /* blockquote 样式 */
            blockquote {
                display: block;
                border-left: 8px solid #d0e5f2;
                padding: 5px 10px;
                margin: 10px 0;
                line-height: 1.4;
                font-size: 100%;
                background-color: #f1f1f1;
            }
    
            /* code 样式 */
            code {
                display: inline-block;
                *display: inline;
                *zoom: 1;
                background-color: #f1f1f1;
                border-radius: 3px;
                padding: 3px 5px;
                margin: 0 3px;
            }
            pre code {
                display: block;
            }
    
            /* ul ol 样式 */
            ul, ol {
                margin: 10px 0 10px 20px;
            }
    
        </style>
    </head>
    <body>
    
    <div id="content"></div>
    
    </body>
    </html>
    
    • 点击事件代码:
    <script>
        layui.use(['jquery','form','layer'], function(){
            var $ = layui.jquery,
                    layer = layui.layer,
                    form = layui.form;
    
            ///预览
            $('#preview').on('click',function() {
    
                var w = ($(window).width() * 0.7);
                var h = ($(window).height() - 50);
    
                layer.open({
                    resize: false,
                    title: '预览',
                    shadeClose: true,
                    area: [w + 'px', h + 'px'],
                    type: 2,
                    content: '/common/html/preview.html',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find('#content').append(editor.txt.html());
                    }
                });
            });
            
        });
    
    </script>
    
    展开全文
  • layui 打开新页面,并传入参数使用的 ...涉及到需要把内容传递到打开的 iframe 页面内,刚好可以利用 layui 携带传参的一个特点。效果预览:具体代码实现为:创建一个 preview.html 预览页面,css 样式来自 wangEdi...

    layui 打开新页面,并传入参数

    使用的 wangEditor 富文本编辑器不带预览的功能,

    所以自己实现了下功能;

    思路是:

    点击打开一个弹窗 or 新页面,

    然后页面展示提交后前端页面看到的大概的样子。

    涉及到需要把内容传递到打开的 iframe 页面内,

    刚好可以利用 layui 携带传参的一个特点。

    效果预览:

    具体代码实现为:

    创建一个 preview.html 预览页面,css 样式来自 wangEditor 官方文档给出的

    预览内容

    /* table 样式 */

    table {

    border-top: 1px solid #ccc;

    border-left: 1px solid #ccc;

    }

    table td,

    table th {

    border-bottom: 1px solid #ccc;

    border-right: 1px solid #ccc;

    padding: 3px 5px;

    }

    table th {

    border-bottom: 2px solid #ccc;

    text-align: center;

    }

    /* blockquote 样式 */

    blockquote {

    display: block;

    border-left: 8px solid #d0e5f2;

    padding: 5px 10px;

    margin: 10px 0;

    line-height: 1.4;

    font-size: 100%;

    background-color: #f1f1f1;

    }

    /* code 样式 */

    code {

    display: inline-block;

    *display: inline;

    *zoom: 1;

    background-color: #f1f1f1;

    border-radius: 3px;

    padding: 3px 5px;

    margin: 0 3px;

    }

    pre code {

    display: block;

    }

    /* ul ol 样式 */

    ul, ol {

    margin: 10px 0 10px 20px;

    }

    点击事件代码:

    layui.use(['jquery','form','layer'], function(){

    var $ = layui.jquery,

    layer = layui.layer,

    form = layui.form;

    ///预览

    $('#preview').on('click',function() {

    var w = ($(window).width() * 0.7);

    var h = ($(window).height() - 50);

    layer.open({

    resize: false,

    title: '预览',

    shadeClose: true,

    area: [w + 'px', h + 'px'],

    type: 2,

    content: '/common/html/preview.html',

    success: function (layero, index) {

    var body = layer.getChildFrame('body', index);

    body.find('#content').append(editor.txt.html());

    }

    });

    });

    });

    标签:layer,预览,传入,solid,layui,新页面,table,border

    来源: https://blog.csdn.net/xianhenyuan/article/details/95199044

    展开全文
  • 因为需求原因,有很多功能需要在弹窗中跳转页面并在顶级页面中新标签页,由于一直没找到解决方法,后来直接把弹窗改为页面,总感觉操作不是那个方便,无意间找到一个可以解决的方法,贴出留作日记,以便后期...

    因为需求原因,有很多功能需要在弹窗中跳转页面并在顶级页面中新开标签页,由于一直没找到解决方法,后来直接把弹窗改为新跳页面,总感觉操作不是那个方便,无意间找到一个可以解决的方法,贴出留作日记,以便后期查看!

    top.layui.index.openTabsPage('/index','陌小白');//(跳转地址,标签名)
    
    展开全文
  • <script type="text/javascript" src="__PUBLIC__/js/layer.js"></script> layer.open({ type:2, title:'模态框', shadeClose:false, shade:0.8, area:['900px','90%'], content:"mapbox1.......
    <script type="text/javascript" src="__PUBLIC__/js/layer.js"></script>
    layer.open({
          type: 2,
          title: '模态框',
          shadeClose: false,
          shade: 0.8,
          area: ['900px', '90%'],
          content: "mapbox1.html?id="+id
        }); 

     

    展开全文
  • 今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tabs的title名称参数,在layui-admin-iframe中自动打开一个新的tabs页面,不需要点击左边的菜单栏,实现一个页面的效果。代码实现:请求的...
  • //跳转到【工作管理】--人员管理页面 function navigateToTeamPersonModule() { window.parent.layui.element.tabAdd('layuiminiTab', { tabId: "/page/team-person", href: "/page/team-person", title
  • <button onclick="javascript:copy(this);" id="{$rel['id']}">...需要手动引入layui js css 包 这里我就不示范了 function copy(e){ var id=e.id; layer.open({ type: 2, title:"修改信息", closeBt
  • 打开的页面一个页签 top.layui.index.openTabsPage('business/businessUserShow.jsp#/self=1','个人信息') businessUserShow.jsp: <script> layui.config({ base: '${ctxLayui}/layuiadmin/' }).extend...
  • 打开的页面一个页签top.layui.index.openTabsPage('business/businessUserShow.jsp#/self=1','个人信息')businessUserShow.jsp:layui.config({base: '${ctxLayui}/layuiadmin/'}).extend({index: 'lib/index'})....
  • 这个问题可能是我工作以来,最死磕不算bug的一个了,晚上熬夜到三点钟,终于找到了解决的办法。...先说一下要修改的地方:点击左侧的菜单栏(即打开一个新的iframe层页面),第一次打开的窗口会刷新,但是再次点击左...
  • 例如:打开一个新页面的同时,传数据。 layer.open({ type: 2, title: '新增项目', shadeClose: false, shade: [0.3], maxmin: true, //开启最大化最小化按钮 area: ['900px', '90%'], scrollbar: false, //屏蔽...
  • 如图所示,点击出售,把A页面的数据传到弹框上面,因为弹框比较复杂,所以使用引入一个新页面。A.html a.jsB.html b.js1、第一种方案sellInte: function (){var obj = document.getElementById("first_value");var ...
  • 最近写项目中需要用到LayUI富文本编辑器,其他地方都挺好,唯独上传图片时,要不就是上传完成后回显404,要不就是访问时404(访问时我是打开的一个页面),返回路径一直有问题,之后把返回的路径改成绝对路径就可以...
  • 这个问题可能是我工作以来,最死磕不算bug的一个了,晚上熬夜到三点钟,终于找到了解决的办法。...先说一下要修改的地方:点击左侧的菜单栏(即打开一个新的iframe层页面),第一次打开的窗口会刷新,但是再次点击左...
  • layui打开窗口不刷新解决办法

    千次阅读 2019-05-09 19:39:51
    这个问题可能是我工作以来,最死磕不算bug的一个了,晚上熬夜到三点钟,终于找到了解决的办法。...先说一下要修改的地方:点击左侧的菜单栏(即打开一个新的iframe层页面),第一次打开的窗口会刷新,但是再...
  • layui打开iframe窗口不刷新的问题

    千次阅读 2019-04-26 16:18:42
    这个问题可能是我工作以来,最死磕不算bug的一个了,晚上熬夜到三点钟,终于找到了解决的办法。...先说一下要修改的地方:点击左侧的菜单栏(即打开一个新的iframe层页面),第一次打开的窗口会刷新,但是再...
  • layUI编写的页面中,遇到这么一种情况,从一个页面中使用layer.open打开一个窗口,窗口中是一个数据表格,现在需要选中数据表格中的一列并获取它的值,以便下面这个选择按钮可以使用这个值进行后一步的操作。...
  • 打开一个新页面的同时,传递数据 layer.open({ type: 2, title: '新增项目', shadeClose: false, shade: [0.3], maxmin: true, //开启最大化最小化按钮 area: ['900px', '90%'], scrollbar: false, //屏蔽...
  • 使用了layui 页面点击新增tab

    千次阅读 2019-10-18 14:12:11
    1:打开一个页面&增加一个tab(iframe页面中打开tab事例) parent.xadmin.add_tab('在tab打开','https://www.baidu.com',true) 去掉方法里面的参数true就是 : iframe页面中打开tab事例(重复点击不刷新) 2:...
  • 发送页面按钮事件绑定的函数: test(){ let id = vm.id let index = layer.open({ type: 2, skin: 'layui-layer-rim', //加上边框 c...
  • layUI编写的页面中,遇到这么一种情况,从一个页面中使用layer.open打开一个窗口,窗口中是一个数据表格,现在需要选中数据表格中的一列并获取它的值,以便下面这个选择按钮可以使用这个值进行后一步的操作。...
  • 去阿里官网下载对应图标 ... 选择对应的图标放入购物狂图标下 选择完毕后,构建一个项目保存图标 编辑项目详细信息 修改前缀为layui-icon-...从layui官网下载框架最新版本,两者解压后放在同一个目录. 在layui目录...
  • layUI编写的页面中,遇到这么一种情况,从一个页面中使用layer.open打开一个窗口,窗口中是一个数据表格,现在需要选中数据表格中的一列并获取它的值,以便下面这个选择按钮可以使用这个值进行后一步的操作。...
  • 打开页面时会调用一个查询方法,把数据赋值到数据表格上 ``` layui.use(['table','form','upload','layer'], function(){ var table = layui.table ,form=layui.form; var brandId,categoryId,...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

layui新开一个页面