layui-layer父子页面传值

最新推荐文章于 2024-04-24 09:22:16 发布

VIP文章轻松拿下

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1.7k

点赞数 1

分类专栏： layer父子页面传值文章标签： javascript layui html 前端

本文链接：https://blog.csdn.net/weixin_44690108/article/details/116934745

版权

layer父子页面传值

一、效果演示

简单的layer父子页面传值实现，下面是演示效果。
在这里插入图片描述

二、layer的使用

1.下载layer组件

官网下载地址
获得 layer 文件包后，解压并将 layer 整个文件夹（不要拆分结构）存放到你项目的任意目录。

2.引入jQuery1.8以及layer.js

  <script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
  <script src="layer.js的路径"></script>

3.layer基础参数

下面是本次使用到的一些属性的介绍，如果想了解全部属性
可以在layer官网进行学习：layer官方文档

名称	类型/默认值	简介
type - 基本层类型	类型：Number，默认：0	layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
title - 标题	类型：String/Array/Boolean，默认：‘信息’	title支持三种类型的值，若传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若需要自定义标题区域样式，可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；如果不想显示标题栏，你可以title: false
content - 内容	类型：String/DOM/Array，默认：’’	content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
skin - 样式类名	类型：String，默认：’’	可以传入layer内置的样式class名，还可以传入自定义的class名。目前layer内置的skin有：layui-layer-lanlayui-layer-molv
area - 宽高	类型：String/Array，默认：‘auto’	在默认状态下，layer是宽高都自适应的，可以只定义宽度area:‘500px’,高度仍然是自适应的。当宽高都要定义时area: [‘500px’, ‘300px’]
maxmin - 最大最小化	类型：Boolean，默认：false	该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
shadeClose - 是否点击遮罩关闭	类型：Boolean，默认：false	如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

三、父子页面传值实现

1.思路

1.打开子页面时，将父页面元素值赋给子页面对应元素
2.子页面点击保存时，将子页面元素值赋给父页面对应元素

2.代码

1.父页面father.gtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父级页面</title>
</head>
<style>
    .center-in-center{
    
        position: absolute;
        left: 50%;
        top: 50%;
        transform