layui弹出层使用方法总结

layui弹出层使用方法总结layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码functionOpenDialog(id,title,url,width,height,callback,params){layui.use(‘layer’,function(){…

大家好,又见面了,我是你们的朋友全栈君。

layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码

function OpenDialog(id,title, url, width, height,callback,params) {
    layui.use('layer', function () {
        var $ = layui.jquery, layer = top.layui.layer;
        width = width + "%"
        height = height + "%";
        layer.open({
            type: 2,
            title: title,
            area: [width, height],
            shade: 0,
            maxmin: false,
            content: GetRootPath() + url,
            zIndex: layer.zIndex,
            success: function (layero, index) {
                if (params) {
                    var iframe = document.getElementById("layui-layer-iframe" + index).contentWindow
                    iframe["layer_params"] = params;
                }
            },
            end: function () {
                if (callback) {
                    var layer_return = window["layer_return"];
                    if (layer_return) {
                        callback(layer_return);
                    } else {
                        callback();
                    }
                   
                }
            }
        });

    })
}

function CloseDialog(ReturnValue) {
    layui.use('layer', function () {
        if (ReturnValue) {
            top.window["layer_return"] = ReturnValue;
        }
        var $ = layui.jquery, layer = layui.layer;
        //当你在iframe页面关闭自身时
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭  
    })
}

function GetParam() {
    if (window.layer_params) {
        return window.layer_params;
    }
}

一共封装了三个方法,打开,关闭,获取传递参数

OpenDialog方法保留了一些常用参数,如标题,打开iframe页面的地址,宽,高,增加了关闭页面的回掉函数与页面之间的传递参数,打开方法通过获取顶层的layer对象,使得打开的窗口全部是基于顶层页面,解决了在iframe中打开页面只能在iframe中显示与移动,宽高都是基于百分比打开,适应性更加灵活一些,向打开的子级页面传递参数是通过向iframe增加变量存储的方式实现的,比较灵活,子级页面关闭后也随之销毁,子级页面关闭后父级页面的回调函数通过api中的end方法嵌套一下,如果子级页面关闭时想要向父级页面传递数据(如表单打开选择树页面回传选项值)时,就会存储在顶级页面的layer_return变量中,因为所有页面都是声明在顶级窗口页面中的,所以不存在什么层级关系的复杂处理,最后附上使用范例

    function Edit(data) {
        OpenDialog("configadd", "编辑", "Frame/Config/Edit?RowGuid=" + data.RowGuid, "80", "90", BindData, "1111");
    }
    
    function BindData(ReturnValue) {
        console.log(ReturnValue)
        BindTable(tabaleid, '/Frame/Config/FindList/', AfterBind);
    }
  $(function () {
        var params = GetParam();
        if (params) {
            console.log(params)
        }
    });
    function Close() {
        CloseDialog();
    }
    function Close() {
        CloseDialog("123");
    }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137961.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 所谓抽象就是对同一类事物的相同特性的提取「建议收藏」

    所谓抽象就是对同一类事物的相同特性的提取「建议收藏」所谓抽象就是对同一类事物的相同特性的提取

  • CentOS7卸载mysql

    CentOS7卸载mysql前言 最近搭建mysql主从,两个虚拟机中的mysql版本不一致,所以就准备卸载其中一个。步骤1.查看mysql安装rpm-qa|grep-imysql2.卸载前关闭mysql服务 rpm-ev–nodepsmysql-community-release-el7-5.noarch rpm-ev–nodepsmysql-community-common-5.6.38-2.e…

  • WinForm和WPF的区别「建议收藏」

    一、控件的差异作为Windows桌面UI开发的两大.net开发库,WinForm和WPF同时存在着。之所以功能如此重合的两个库同时存在,是因为两者的底层差异非常大,WinForm底层依赖于传统的Win32API,特别是User32.dll;而WPF则底层依赖于Direct3D。而我们知道User32和Direct3D两者是平行存在,彼此独立的。WPF之前几乎所有的WindowsUI开发都依赖于User32,当然游戏除外。随着Direct3D的日趋成熟和显卡的普通性能提升,微软力图改变这种状况,所以开发

  • python处理亿级大数据(rar暴力破解器安卓版)

    转载请注明出处:https://blog.csdn.net/l1028386804/article/details/85566045今天是2019年元旦,首先祝大家元旦快乐,在这个喜庆的日子里,不知道大家有没有坚持研究自己所在领域的知识。其实,每项知识、技能的积累,需要的是日复一日的坚持,正所谓——持之以恒,贵在坚持,这样才能做到每天进步一点点。好了,步入正题,今天,闲来无事,基于Python…

  • .NET软件工程师网络在线培训就业课程「建议收藏」

    .NET软件工程师网络在线培训就业课程「建议收藏」.NET软件工程师网络在线培训就业课程课程讲师:北风.NET专职讲师团队 课程分类:套餐适合人群:高级课时数量:2000课时用到技术:MVC5,EF6,BootStrap,HTML5,JqueryMobile,VS,.NET,ASP.NET 北风团队精心打造的42个经典案例,囊括了企业常见项目开发90%的典型应用 1、典型登录

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号