Layui弹出层 加载 做编辑页面的方法

 更新时间:2019年09月16日 10:37:57   作者:东明之羞  
今天小编就为大家分享一篇Layui弹出层 加载 做编辑页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

layui是一款优秀的模块化前端框架。利用layui弹出层做编辑页面

先上效果图

基本准备,引入layui的layui.css,layui.js文件

<link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" rel="external nofollow" media="all">
<script src="../../../Publics/others/layui/layui.js"></script>

Js方法

/**
 * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件
 * @param {} title 标题 不显示为false
 * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度
 * @param {} path 弹出页面路径
 * @param {} sucFunName 执行保存操作后再弹出页面中的保存方法名称
 * @param {} callBack 执行保存操作之后的其他操作
 * @returns {} 
 */
function openDetial(title, area, path, sucFunName, callBack) {
  layer.open({
    type: 2,
    title: title, //不显示标题栏
    closeBtn: 2,
    area: area,
    shade: 0.8,
    id: (new Date()).valueOf(), //设定一个id,防止重复弹出 时间戳1280977330748
    btn: ['保存', '取消'],
    btnAlign: 'r',
    moveType: 1, //拖拽模式,0或者1
    content: path,
    yes: function (index, layero) {
      var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0');
      alert("-----");
      try {
        var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow ||
           btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow;
        var func = new Function('_ifr', "return _ifr." + sucFunName + "();");
        var flg = func(_ifr);
        if (flg == false) {
          return false;
        } else {
          if (callBack != null) callBack();
          window.location.reload();
        }
      } catch (ex) {
 
      }
    },
    btn2: function (index, layero) {
    }
  });
}

以下是测试页面 测试页面中具备保存方法ApplicationSave()

调用 如下参数中的ApplicationSave和编辑页面的方法名一致

openDetial("列表维护", ['600px', '550px'], "./editor.html", "ApplicationSave", function() {alert("执行完了");});

有兴趣的小伙伴,可以试试

以上这篇Layui弹出层 加载 做编辑页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • webpack5 import动态导入实现按需加载并给文件统一命名的配置方法

    webpack5 import动态导入实现按需加载并给文件统一命名的配置方法

    这篇文章主要介绍了webpack5 import动态导入实现按需加载并给文件统一命名的配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • 基于javascript实现按圆形排列DIV元素(三)

    基于javascript实现按圆形排列DIV元素(三)

    本篇文章主要介绍基于javascript实现按圆形排列DIV元素的方法,此文着重于介绍怎样实现图片按椭圆形转动,需要的朋友来看下吧
    2016-12-12
  • 基于JS正则表达式实现模板数据动态渲染(实现思路详解)

    基于JS正则表达式实现模板数据动态渲染(实现思路详解)

    这篇文章主要介绍了基于JS正则表达式实现模板数据动态渲染 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 详解webpack+ES6+Sass搭建多页面应用

    详解webpack+ES6+Sass搭建多页面应用

    这篇文章主要介绍了webpack+ES6+Sass搭建多页面应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 原生JS实现悬停下拉菜单

    原生JS实现悬停下拉菜单

    这篇文章主要为大家详细介绍了原生JS实现悬停下拉菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript DOM API的使用教程及综合案例

    JavaScript DOM API的使用教程及综合案例

    dom是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,下面这篇文章主要给大家介绍了关于JavaScript DOM API的使用教程及综合案例的相关资料,需要的朋友可以参考下
    2023-03-03
  • Javascript前端经典的面试题及答案

    Javascript前端经典的面试题及答案

    最近在网上看到了一些关于Javascript的面试题就整理了下来,希望对有需要的朋友或者自己能有一定的帮助,后续看到再继续补充。下面一起来看看这篇关于Javascript前端常见的面试题的文章,一起来学习学习吧。
    2017-03-03
  • javascript 事件处理、鼠标拖动效果实现方法详解

    javascript 事件处理、鼠标拖动效果实现方法详解

    在经历了漫长的时期,终于下定了决心自己写一个层的拖动。当然了,其它的拖动也是这样的思路和做法,或者说,这样的拖动适合所有的可见元素
    2012-05-05
  • js实现导航栏上下动画效果

    js实现导航栏上下动画效果

    这篇文章主要为大家详细介绍了js实现导航栏上下动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript取得键盘按下方向键是哪个的方法

    JavaScript取得键盘按下方向键是哪个的方法

    这篇文章主要介绍了JavaScript取得键盘按下方向键是哪个的方法,涉及javascript针对键盘按键事件的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论