需求:最外面列表界面点修改弹出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弹层(父子传值,兄弟传值)的更多相关文章

  1. 学习layer弹层组件移动版

    layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层

  2. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  3. layer弹层基本参数初尝试

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. layer弹层插件

      // 使用前需要引入jquery的支持,链接如下:   https://blog-static.cnblogs.com/files/liguanlong/jquery1.9.1.min.js    ...

  5. Layer弹层组件 二次扩展,项目中直接使用。

    /************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...

  6. layer弹层

    获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可. 注意:引入layer.js前必须先引入jquery1. ...

  7. HTML5 本地存储+layer弹层组件制作记事本

    什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这 ...

  8. layer弹层content写错导致div复制了一次,导致id失效 $().val() 获取不到dispaly:none div里表单的值

    ​ 错误之源: $("a.consult").click(function () {         lib_consult_html = $('#consult-html').h ...

  9. layer弹出层传值到父页面

    目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).r ...

随机推荐

  1. 结合suctf-upload labs-RougeMysql再学习

    这篇主要记录一下这道题目的预期解法 做这道题首先要在自己的vps搭建一个rouge mysql,里面要填写需要读取客户端的文件名,即我们上传的phar文件路径 先搭一个rouge mysql测试看看: ...

  2. @RequestBody 注意的问题

    contentType : "application/json", //只能是这个 RequestBody 不能和form/data共存: @RequestMapping(valu ...

  3. springcloud(九):熔断器Hystrix和Feign的全套应用案例(二)

    一.. 创建Eureka-Server 服务中心项目 1. 创建Eureka-Server 服务中心项目架构如下 2. pom.xml <dependencies> <depende ...

  4. 使用maven搭建ssm框架环境

    1.前言 因为经常换环境,在搭ssm框架的时候老是出错,所以记录一下最近搭建的环境,以供参考. 本文讲解如何使用maven搭建ssm框架,并能用于简单的登录注册. IDE:IDEA,JDK版本:1.8 ...

  5. CentOS -- Zookeeper installation and configure

    1 JDK 1.8 must installed first 2 Get Zookeeper package wget https://archive.apache.org/dist/zookeepe ...

  6. 一文搞懂transform: skew

    如何理解斜切skew,先看一个demo.在下面的demo中,有4个正方形,分别是 红色:不做skew变换, 绿色:x方向变换, 蓝色:y方向变换, 黑色:两个方向都变换, 拖动下面的滑块可以查看改变s ...

  7. 自制轮子 canvas tree

    这是树的效果 这个树拥有的功能有 1.小地图显示 2.小地图点击快速定位 3.点击加减显示根节点 4.基本的数显示 5.节点拖拽 6.点击头像跳转到相关页面 7.使用直角线和直线选择 8.画布自适应 ...

  8. HDU5988 - 2016icpc青岛 - G - Coding Contest 费用流(利用对数化乘为加

    HDU5988 题意: 有n个区域,每个区域有s个人,b份饭.现在告诉你每个区域间的有向路径,每条路有容量和损坏路径的概率.问如何走可以使得路径不被破坏的概率最小.第一个人走某条道路是百分百不会损坏道 ...

  9. POJ-1325 Machine Schedule 二分图匹配 最小点覆盖问题

    POJ-1325 题意: 有两台机器A,B,分别有n,m种模式,初始都在0模式,现在有k项任务,每项任务要求A或者B调到对应的模式才能完成.问最少要给机器A,B调多少次模式可以完成任务. 思路: 相当 ...

  10. 2018 Petrozavodsk Winter Camp, Yandex Cup

    A. Ability Draft solved by RDC 60min start, 148 min AC, 1Y 题意:两只 Dota 队伍,每队 \(n\) 个英雄,英雄一开始无技能,他们需要按 ...