layui框架中layer父子页面交互的方法分析

2024-04-05 19:33:11

本文实例讲述了layui框架中layer父子页面交互的方法。分享给大家供大家参考，具体如下：

layer是一款近年来备受青睐的web弹层组件，官网地址是：http://layer.layui.com/

可以从官网上下载最新版本。

还可点击此处本站下载。

当layer以iframe层的方式弹出新的窗口（子页面），如何在子页面中访问父页面的元素和函数。

1、访问父页面元素值

var parentId=parent.$("#id").val();//访问父页面元素值

2、访问父页面方法

var parentMethodValue=parent.getMethodValue();//访问父页面方法

3、如何关闭弹出的子页面窗口

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);//关闭弹出的子页面窗口

4、如何从子页面执行刷新父页面操作

parent.location.reload(); // 父页面刷新

附：layer弹出多个iframe找到父页面的方法

父页面：

function aa(){
    var index = parent.layer.getFrameIndex(window.name);
    var iframeName = 'layui-layer-iframe'+index;
    openDialog1('选择XXX', '${ctx}/*****,'800px', '500px',iframeName);
}
function openDialog1(title,url,width,height,target){
    top.layer.open({
      type: 2,
      area: [width, height],
      title: title,
      maxmin: true, //开启最大化最小化按钮
      content: url ,
      btn: ['确定', '关闭'],
      yes: function(index, layero){
         var body = top.layer.getChildFrame('body', index);
         var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
         var inputForm = body.find('#inputForm');
         var top_iframe;
         if(target){
           top_iframe = target;//如果指定了iframe，则在改frame中跳转
         }else{
           top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
         }
         inputForm.attr("target",top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示
         if(iframeWin.contentWindow.doSubmit(top_iframe) ){
           top.layer.close(index);//关闭对话框。
           top.window[iframeName].frames.location.reload();//刷新父亲
         }
     },
     cancel: function(index){
      }
  });
}
//子页面回调方法
function addRecord(name,chainName){
  alert(name);
}

子页面

function doSubmit(iframeName) {
    var sel=$("tbody tr td input.i-checks:checked");
    var size = sel.size();
    if(size==0){
      top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'});
      return false;
    }else{
      for(var i=0;i<size;i++){
        top.window[iframeName].addRecord(sel[i].name,sel[i].value);
      }
      return true;
    }
}

另：layui完整源码可点击此处本站下载。

希望本文所述对大家基于layui框架的程序设计有所帮助。

jQuery、layer实现弹出层的打开、关闭功能

打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层,list.js: $(".add_category,.update").click(function(){ //弹出框 var doMain = $('.domain_name').val(); layer.open({ shade: [0.5, '#000', false], type: 2, area: ['900px', '530px'], fix: false, //不固定 maxmin
jQuery使用Layer弹出层插件闪退问题

一.前言巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后写点击事件在form表单中(第一个坑),接着,又使用button按钮(悲剧的开始),同样放在form表单下.想要的效果就是当我点击按钮的时候,就弹出层.(悲剧) 好了,巨坑开始,一开始页面打好之后,就放到SSM框架中,出现的问题一开始就是404地址找不到,使用绝对定位不行,浏览器报的错误一直是错误的
jQuery Layer弹出层传值到父页面的实现代码

目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).ready(function(){ //添加任务弹出层 addTask(); }); //弹出层 function addTask(){ $('[data-id="addList"]').on('click', function(){ layer.open({ type: 2,title:
layui中layer前端组件实现图片显示功能的方法分析

本文实例讲述了layer前端组件实现图片显示功能的方法.分享给大家供大家参考,具体如下: 实现图片显示功能:layer 1.在这里介绍一种layer前端组件 layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案, 致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 官网下载地址:http://layer.layui.com/ 或者点击此处本站下载. 里面有具体的使用方法这里注意几点:在使用layer前端组件之前,我们要引入layer的js文件 <script
layer实现关闭弹出层刷新父界面功能详解

本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 最近一个项目采用的是hui前端框架,他的弹出层就是用的layer插件,对于弹出层,有一个操作体验大家都知道,就是关闭弹出层,需要刷新父页面.开始写的时候,我陷入了自己的误区,在弹出层处理成功之后,我调用的是: var index = parent.layer.getF
web 前端常用组件之Layer弹出层组件

经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感谢 Layer 作者贤心,Layer 官网地址:http://layer.layui.com/ 1. Layer 使用特点 Layer 具备全方位的解决方案,致力于服务各水平段的开发人员,让页面轻松地拥有丰富友好的操作体验. Layer 尽可能地在以更少的代码展现更强健的功能,注重性能的提升.易用和实用性.. Layer 兼容了包括IE6在内的所有主流浏览器. 数量可观的接口,可以自定义需要的风格,每
Thinkphp5结合layer弹窗定制操作结果页面

本文实例为大家分享了Thinkphp5结合layer弹窗定制页面的具体代码,供大家参考,具体内容如下 1 打开应用公共文件页面 appliction/common.php,编写以下代码注意: 成功消息的绿色背景部分是iframe 框架写法,如果是普通页面.就吧parent去除,改为: self.location.href="'.$url.'" rel="external nofollow" rel="external nofollow"
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例

父层: jsp中: //页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面 <input type="hidden" id="getValue" name="getValue" value="" /> js代码: //设置function,当执行时,弹出子窗口并传递当前窗口名称 //弹出子窗口(选择商家) function choseMerchant() { //获取当前窗口名称 v
layui框架中layer父子页面交互的方法分析

本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 还可点击此处本站下载. 当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数. 1.访问父页面元素值 var parentId=parent.$("#id").val();//访问父页面元素值 2.访问父页面方法 va
laravel框架中控制器的创建和使用方法分析

本文实例讲述了laravel框架中控制器的创建和使用方法.分享给大家供大家参考,具体如下: laravel中我们可以使用 artisan 命令来帮助我们创建控制器文件. php artisan make:controller TestController TestController 控制器名我们可以任意指定.文件默认会创建在 app\Http\Controllers 目录下. 打开控制器文件,我们就可以添加自已的方法了. <?php namespace App\Http\Controllers
thinkPHP框架中layer.js的封装与使用方法示例

本文实例讲述了thinkPHP框架中layer.js的封装与使用方法.分享给大家供大家参考,具体如下: v层:(还没实现功能的) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>添加</title> </head> <body> <form action="{
在layui框架中select下拉框监听更改事件的例子

在select 加入红框中的代码(看不到红框的往右拖动一点) 事件监听select(这里面是上面图中红框内容可自定义) 以上这篇在layui框架中select下拉框监听更改事件的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
jsp页面中引用其他页面的简单方法

初看这个标题....大家的感觉一定是好2啊.....博主一定要说jsp的动态引用(jsp:include)和静态引用(@include)了.介绍这两者区别的文章已经烂大街了..一搜一大把..博主竟然还来介绍这些老古董..果断alt+F4... 如果你确实是这么想的...那请先别急着关闭页面...今天我来分享一下自己的理解,算是对烂大街的东西的一点补充吧...(后面文字会比较啰嗦) 首先先说明下为什么会去讨论这个话题. 我在写自己的博客程序的时候(blogv2.labofjet.com),程序中的
ThinkPHP框架使用redirect实现页面重定向的方法实例分析

本文实例讲述了ThinkPHP框架使用redirect实现页面重定向的方法.分享给大家供大家参考,具体如下: ThinkPHP redirect 方法 ThinkPHP redirect 方法可以实现页面的重定向(跳转)功能.redirect 方法语法如下: $this->redirect(string url, array params, int delay, string msg) 参数说明: 参数说明 url 必须,重定向的 URL 表达式. params 可选,其它URL参数. del
thinkPHP框架中执行原生SQL语句的方法

本文实例讲述了thinkPHP框架中执行原生SQL语句的方法.分享给大家供大家参考,具体如下: 怎样在thinkphp里面执行原生的sql语句? $Model = new Model();//或者 $Model = D(); 或者 $Model = M(); $sql = "select * from `order`"; $voList = $Model->query($sql); 只是需要new一个空的模型继承Model中的方法. 注意query是查功能,execute是增删改
vue.js $refs和$emit 父子组件交互的方法

本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="
ThinkPHP框架中使用Memcached缓存数据的方法

本文实例讲述了ThinkPHP框架中使用Memcached缓存数据的方法.分享给大家供大家参考,具体如下: ThinkPHP默认使用文件缓存数据,支持Memcache等其他缓存方式,有两个PHP扩展:Memcache和Memcached,Memcahe官方有说明,主要说一下Memcached. 相对于PHP Memcache,php Memcached是基于原生的c的libmemcached的扩展,更加完善,建议替换为php memcached. 版本3.2.2开始内置了Memcached驱动(
YII2框架中actions的作用与使用方法示例

本文实例讲述了YII2框架中actions的作用与使用方法.分享给大家供大家参考,具体如下: 我们常在控制器中看到一个actions的方法,这个方法具体的作用是共用一些功能相同的action,方便调用. 当然我们也可以自已写一些action来进行调用.在项目目录下创建common目录,并创建TestAction.php文件.action文件的存放路径可以随意指定. <?php //注意这里的命名空间,要跟你的目录对应 namespace app\common; use yii\base\Acti

layui框架中layer父子页面交互的方法分析

相关推荐

随机推荐