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)


相关推荐

  • 查询linux版本信息的命令_查系统版本命令

    查询linux版本信息的命令_查系统版本命令通常使用命令uname在Linux下面察看版本信息-a或–all:显示全部的信息;-m或–machine:显示电脑类型;-n或-nodename:显示在网络上的主机名称;-r或–release:显示操作系统的发行编号;-s或–sysname:显示操作系统名称;-v:显示操作系统的版本;-p或–processor:输出处理器类型或”unknown”;-i或-

  • 微机原理与接口技术知识点整理复习–纯手打

    微机原理与接口技术知识点整理复习–纯手打明天就要考试了,来一波知识点整理。都会了,期末考试你不过你来找我!第一章1.按微处理器的字节分类4位微处理器8位微处理器16位微处理器32位微处理器2.这个必须背,不是简答就是简答,肯定出简答3.系统软件给一个实例判断是否是系统软件!常见的系统软件:操作系统、程序语言设计、语言处理程序、数据库管理程序、系统辅助处理程序第二章1….

  • 6200 uboot测试版分析(四)

    6200 uboot测试版分析(四)

  • hadoop 面试题收集及个人答案整理

    hadoop 面试题收集及个人答案整理1、简要描述如何安装配置一个apache开源版hadoop,描述即可,列出步骤更好      –解压hadoop包,到指定安装文件夹      –配置linux基本网络环境、jdk环境、防火墙环境      –修改主机名,方便后面UI的访问      –修改hadoop/etc/hadoop/conf下的配置文件,根据部署的模式和需要进行配置      –格式化nam…

  • modelsim-win64-10.4-se 破解攻略

    modelsim-win64-10.4-se 破解攻略在实验室换了新的win10系统,原来的quartus9.0在win10上安装不成功,没办法只能换成13.1版本,已经安装可用,下面是与其配合的modelsim-win64-10.4-se的破解攻略,安装教程可以去看正点原子的FPGA开发手册,写的很详细,但是没有讲破解方法,下面是可用的破解方法:软件安装好了却不能用,想必大家都有过这样的痛苦和无奈。这款软件的破解花了我整整一个下午的时间…

  • 下拉列表框DropDownList绑定Dictionary泛型类

    下拉列表框DropDownList绑定Dictionary泛型类DropDownList绑定Dictionary泛型类定义一个Dictionary泛型类///<summary>   ///产品类型   ///</summary>   ///<returns></returns>   publicDictionary<string,string>productType() …

发表回复

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

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