Layer弹层(父子传值,兄弟传值)
需求:最外面列表界面点修改弹出LayerA界面,再点击LayerA界面中的选择地图坐标按钮弹出LayerB地图界面
这个过程涉及到的:
1:LayerA将坐标传给LayerB,LayerB在地图上显示坐标。
2:LayerB选完坐标点击确定后,地图关闭,LayerB将坐标传回LayerA
列表界面点击修改按钮弹出LayerA界面
LayerB界面点击弹出地图事件
LayerB地图界面点击确定传值给LayerA
1:LayerA与LayerB是什么关系?
兄弟关系,如果是父子关系,子的页面会嵌套在父页面里,无法实现子页面比父页面大
关键代码:
parent.layer.open(options);//点击LayerB按钮时,以兄弟页面的形式弹出
2:如何将LayerB地图上坐标的值传给LayerA
监听地图,将点击的坐标传给页面上的一个label保存,在提交的时候读取labael,并通过jq的以id来拿到frame元素的方式,将label的值赋值给兄弟页面的一个文本框里。
关键代码:
var i = $("#lb1").val();
$(parent.frames["Form"].document).find("#AreaPoint").val(i);//LayerB的Frame的id 叫Form,事先在layer的id属性里定义过了
var index = parent.layer.getFrameIndex(window.name);//获取当前页面的name 即HomePeopleForm 都是通过父页面(即列表页)来操作子页面里的元素
parent.layer.close(index);
Layer弹层(父子传值,兄弟传值)的更多相关文章
- 学习layer弹层组件移动版
layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层
- jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
- layer弹层基本参数初尝试
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- layer弹层插件
// 使用前需要引入jquery的支持,链接如下: https://blog-static.cnblogs.com/files/liguanlong/jquery1.9.1.min.js ...
- Layer弹层组件 二次扩展,项目中直接使用。
/************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...
- layer弹层
获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可. 注意:引入layer.js前必须先引入jquery1. ...
- HTML5 本地存储+layer弹层组件制作记事本
什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这 ...
- layer弹层content写错导致div复制了一次,导致id失效 $().val() 获取不到dispaly:none div里表单的值
错误之源: $("a.consult").click(function () { lib_consult_html = $('#consult-html').h ...
- layer弹出层传值到父页面
目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).r ...
随机推荐
- 后端开发实践系列之三——事件驱动架构(EDA)编码实践
在本系列的前两篇文章中,笔者分别讲到了后端项目的代码模板和DDD编码实践,在本文中,我将继续以编码实践的方式分享如何落地事件驱动架构. 单纯地讲事件驱动架构(Event Driven Architec ...
- Redux概览
简介 Redux 是一个有用的架构 Redux 的适用场景:多交互.多数据源 工作流程图 action 用户请求 //发出一个action import { createStore } from 'r ...
- Debian下Hadoop 3.12 集群搭建
Debian系统配置 我这里在Vmware里面虚拟4个Debian系统,一个master,三个solver.hostname分别是master.solver1.solver2.solver3.对了,下 ...
- PIXIJS的一些使用
我发现pixijs在国内简直就是一片静土啊,只有那么一点点的微弱的不能再微弱的声音. 我在这里整理了下我使用过程中解决和可能理解的一些问题吧,都是一个个点,而不是完整的示例. 先放官网示例: http ...
- c++中strcmp,strcopy函数的使用
1.strcmp(str1,str2) C/C++函数,比较两个字符串, 设这两个字符串为str1,str2,若str1==str2,则返回零:若str1<str2,则返回负数:若str1> ...
- 9406LaTeX公式
需要注意的是: 1.本文只对第四章排版数学公式进行简单整理 2.本文大量内容直接引自官网,尤其是涉及4.开头的标题,为方便读者查阅对比,就不一一删改和引注,你可以点此访问官网对应内容,也可以点此下载我 ...
- 实战docker,编写Dockerfile定制tomcat镜像,实现web应用在线部署
最初在tomcat上部署web应用的方式,是通过maven的maven-compiler-plugin插件先打成war包,再将war包复制到tomcat的webapps目录下,后来用上了tomcat7 ...
- [Python] 通过采集两万条数据,对《无名之辈》影评分析
一.说明 本文主要讲述采集猫眼电影用户评论进行分析,相关爬虫采集程序可以爬取多个电影评论. 运行环境:Win10/Python3.5. 分析工具:jieba.wordcloud.pyecharts.m ...
- Python 基础 2-3 列表的反转与排序
引言 列表是按照特定格式排序而成的,有时候这种排序方式我们并不喜欢,我们希望它可以按照我们的方式来进行正序或者倒序排序,或其他的排序方式 反转与排序 比如说我这里有一组列表,里面存放的全部都是数值,但 ...
- (二)快速搭建 ASP.net core Web 应用
目录 1. 新建项目并上传Github 2. 关联Jenkins实现持续集成 3. 已经磨好枪了,开始写代码 1. 新建项目并上传Github 新建 ASP.NET Core Web 应用程序,勾选“ ...