用于网页的弹出页面 可以弹出很多种东西

 

1、访问父页面中的某个元素的值

var parentInfo = parent.$(“#id”).val(); 得到父页面某个元素的值

我觉得这个方法应该不常用把,毕竟要对特定的某个元素来获取值,但是也要记住

 

2、访问父页面的方法

var temp = parent.XXXfunction(); 得到的是这个函数的返回值

这个方法可以用于获取1、获取不到的值,比如说要获取的元素的值和点击某个按钮生成这个弹窗的按钮有关,那么可以在主页面中先获取好值,在通过某个方法return这些值,然后在子页面就可以调用这个方法来获取父页面中的那个已经获取好的值。OK

 

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

var index = parent.layer.getFrameIndex(window.name);

parent.layer.close(index);

这个可以写在某个按钮中当点击按钮后,子页面关闭。

 

4、在子页面执行刷新父页面操作

parent.location.reload();

可以是子页面中的某个按钮,比如保存 刷新,把这个代码写在这些按钮的点击事件中,即可。这样刷新之后,原来页面会重新加载,就不用在关闭弹出页面了。

 

记住 弹出页面不是 iframe 就不涉及传值问题,其他的都是同一页面

 

————————————————————————————————————

 

此次小项目实现功能:

1、点击添加按钮,弹出框,框中无内容

2、点击查看按钮,弹出框,框中的input框内是父页面的那些内容

3、点击修改按钮,弹出框,框中内容是父元素的内容,用户修改后,点击子页面,保存按钮,回到父页面。

 

首先引入文件

jquery.js layer.js   或者    layui.css  layui.js

 

然后在父页面中编写页面,在相应的js文件中定义三个按钮的onclick事件

user_add();  user_check();  user_edit();

js代码:

//定义一个数组,用于存放相关user的信息

var info = new Array();

//定义getInfo函数,用于在子页面获取父页面的相关user信息

function getInfo() {

return info;

}

//添加按钮的onclick事件的function

function  user_add() {

   layer.open({

   type:  2,  //0(信息框,默认)1(页面层)2iframe层)3(加载层)4tips层)

   area:  [‘650px’,‘350px’],

   fix:  false,

   maxmin:  true,

   title:  ”添加用户

      shade:  0.4,   //默认是0.3透明度的黑色背景(‘#000’)。如果你想定义别的颜色,可以shade: [0.8, ‘#393D49’];如果你不想显示遮罩,可以shade: 0

   content:  ‘user-add.html’   //弹出层是个iframe,这里就写iframeurl

   });

}

//这个user-add.html里面就根据弹出层要求的内容来填写

 

//查看按钮的onclick事件function,需要把当前点击按钮这个元素传进function中,以便于获取这个按钮对应的相关User的信息,onclick=”user_check(this)”

function  user_check(tag) {

   //此时的$(tag)就相当于$(this)这里不能用this

   var i = 0;

   //下面这段代码中,

   注意

   1i++

   2、此时的$(this)指的是每个循环的元素自己

   3td元素 获取其值是text()  input获取其值是val();

   $(tag).parent().siblings().each(function() {

     info[i++] = $(this).text();

   });

   

   layer.open({

   type:  2,

   area:  [‘650px’,‘350px’],

   fix:  false,

   maxmin:  true,

   title:  ”查看用户

   shade:  0.4,

   content:  “user-check.html”

   });

}

此时,user-check.html中的内容就是你需要展示的内容,这个子页面中的js代码挺重要

 

//首先获取父页面中的信息,也就是那个info数组

var  infomation  =  window.parent.getInfo();

var  i  =  0;

//把获取到的值填入到子页面中 OK

$(“article  input”).each(function() {

   $(this).val(infomation[i++]);

   $(this).attr(“readonly”,”readonly”);//设为只读,不可更改

});

 

//修改按钮 先完成查看内容,然后用户修改后,点击子页面中的保存按钮后,保存,关闭页面

和查看的部分差不多把,只是子页面多一些功能。

 

还有在子页面中,比如点击提交后怎么就关闭这个弹窗了

$(‘#提交的元素‘).on(‘click’, function(){

var index  =  parent.layer.getFrameIndex(window.name);  //获取当前窗体索引 

   parent.layer.close(index); //执行关闭

});

 

下面这段代码完成了点击这个刷新按钮后,在父页面显示了另一个弹出层,然后关闭本弹出层,在这里达到了在子页面操作父页面的效果parent

$(“.refresh”).click(function() {

var index  =  parent.layer.getFrameIndex(window.name);

parent.layer.msg(‘你被拉黑名单了!‘,{shade: 0.3});

     parent.layer.close(index);

});

在这个项目中把这个放在一个函数中,然后把可能重用的页面放在了一个js文件中。为了统一项目的风格,把所有页面的共同部分的css写在一个文件中,然后每个页面都引用这个css文件,每个页面的架子是一样的,还把每个页面相同的部分写在了一个html中,以后再写页面的时候,就可以以他为模板来添加东西就OK

 

 

两种方式 父页面的值传到子页面  子页面设置父页面的值

目前我觉得这两个的实现都是在子页面执行父页面的方法 前者,先把值存好,在子页面通过调用父页面的方法,把值获取过来,后者也是在子页面调用父页面的方法

 

 

success函数实现父页面的值传入子页面:

success: function(layero,index) {

var child= layer.getChildFrame(‘body’,index);//取得子页面

    var iframeWin = window[layero.find(‘iframe’)[0][‘name’]];

     var inputList = child.find(‘input’);//这样的话要知道子页面中的

     for(var j = 0; j< inputList.length; j++) {

         $(inputList[j]).val(info[j]);

     }

}

 

 

 

 

—————————————————————————————————————

 

怎么实现把子页面的值传给父页面呢,并且是传给的元素是和点击的元素相关的,那么先在父页面定义一个对象和function,然后在子页面调用这个方法,子页面也就获得了这个点击的特定的元素。然后在父页面中再定义一个函数,用于改变父页面的某些元素的值,这个函数在子页面调用,传入的值就可以是子页面产生的值

看代码:

父页面的那个

var tag1;  //定义的对象用于存放点击的元素

function gettag1() {

return tag1;

}

//修改按钮的onclick事件,传入的tag就是点击的元素本身

function user_edit(tag,title,url) {

var info = new Array();

var i = 0;

tag1 = tag;

//给定义的对象tag1赋值,这样,点击的元素就可以在子页面调用gettag1这个function  var temp = parent.gettag1()   这样temp就是那个点击的元素。

$(tag).parent().siblings().each(function() {

info[i++] = $(this).text();

});

if (title == null || title == ”) {

title=false;

};

if (url == null || url == ”) {

url=”404.html”;

};

layer.open({

type:2,

title: title,

area:[‘650px’,’350px’],

fix: false, //不固定

maxmin: true,

shade:0.4,

content:url,

success: function(layero,index) {

var body = layer.getChildFrame(‘body’,index);//建立父子联系

             var iframeWin = window[layero.find(‘iframe’)[0][‘name’]];

             var inputList = body.find(‘input’);

            for(var j = 1; j< inputList.length+1; j++) {

                $(inputList[j-1]).val(info[j]);

               }

}

});

}

 

 

子页面:user-polish.html

var info = new Array();

$(document).ready(function(){

$(“.save”).click(function() {

var i = 0;

$(“input”).each(function() {

info[i++]=$(this).val();

});

//调用父页面的方法获取父页面的那个点击事件的元素

var tag1 = parent.gettag1();

//调用父页面的方法,用子页面的数值来改变父页面的元素的值

parent.polish(tag1,info);

//关闭这个弹窗

var index  =  parent.layer.getFrameIndex(window.name);

     parent.layer.close(index);

          //使用parent可以获得父页面DOM

});

});

 

parent.location.reload();

这里面location.reload();会重新向浏览器请求数据,那么就会重新画页面

 

 

 

 

接下来系统性的学习一下

有两种使用方法:

一种作为独立组件,在js代码中直接使用layer的各种方法,需要引入 jQuery 1.8以上版本和layer.js  

一种是模块化使用,引入layui.css layui.js 其实这种包含了第一种,大致用第一种就OK

 

然后讲解参数:

type 默认:0

0:信息框 1:页面层 2iframe 3:加载层 4tips

页面层:在父页面中弹出父页面定义好的html元素,这块元素应该先 displaynone;

iframe:在父页面中弹出另一个定义好的页面

加载层,就是弹出加载的那个页面,不用自定义

tips

 

title 默认:“信息”

title:[标题文本,标题css样式(可省略)]   不想有的话就  title:false

 

content:默认为空

页面层  传入任意文本或者html的元素 可以用$(#id)来表示某元素,用选择器的方式

,如果传入的是元素,要用单引号括起表示成一个字符串

 

iframe层 表示iframeurl [url,no(是否出现滚动条,可省略)]

  

tips

 

skin:样式类名 可以是 layer内置的:layui-layer-lanlayui-layer-molv

还可以是自定义的:skin:demo-class

1、先在layerstyle文件夹中新建一个文件夹,比如是myskin

2、在myskin中新建style.css,这里面写demo-class的样式

3、使用这个样式

·  //单个使用

·  layer.open({

·    skin: ‘demo-class’

·  });

·  //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高

·  layer.config({

 extend: ‘myskin/style.css’, //加载您的扩展样式

skin: ‘demo-class’

·  })

·  //style.css中的样式

·  body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}

·  body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}

·  body .demo-class .layui-layer-btn a{background:#333;}

·  body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}

·  …

加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。    

 

 

area:默认:auto

area:[‘300px’,’400px’]

 

offset 坐标 默认:水平居中

offset: [‘100px’, ’50px’]  offset:[top,left]  top 或者left可省略,省略即为默认的居中;

 

btn  默认:“确认”

可以定义xx>=0)个按钮btn:[确认’,’保存’,’取消。。。。。。],当只有两个时,可以写btn:[‘yes’,’no’]

对按钮写点击事件,

btn:[‘确认’,’保存’,’取消。。。。。。]

btn1: function() {…….},

btn2: function() {……..},

btn3: function() {……..},

……

cancel: function() {右上角的关闭回调,就是点击后会执行的代码;}

 

btnAlign 按钮排列方式 ‘l’靠左  ‘r’靠右   ‘c’ 居中

 

closeBtn 关闭按钮,默认:1  可以是12 ,不显示则为0

 

shade  弹层外区域 默认是0.3 的黑色背景 其他的可以这样:shade: [0.8,‘#787899’],不显示写0

shadeClose 点击shade是否关闭 默认false

 

time: 自动关闭的毫秒数 time:5000,表示5秒后自动关闭   默认为0 表示不关闭

 

id 设置后只允许同时弹出一个,一般用于页面层和ifame 不是很明白

 

anim 弹出动画 默认:0  可以选0-6 ,不显示则是 -1

 

maxmin 最大最小化 默认false 对信息框和iframe有效 设置true设置此功能

 

fixed 默认 true  鼠标滚动时,是否固定在可视区域

 

resize 是否允许拉伸 默认 true

 

resizing 窗口拉伸的回调函数,窗口拉伸后执行的函数  

resizing: function(layero) {alert(layero);}这样子

 

scrollbar:是否允许出现滚动条  默认:true

 

 

 

success: function(layero,index) {}   层创建完毕时执行的函数

 layero 当前层DOM index 当前层索引

 

cancel:function() {……} 右上角的关闭按钮的触发回调

 

yes:function() {……} 会产生一个确认按钮,点击这个按钮的回调函数

 

end:function() {…….}层销毁后的回调

 

layer.config({options}) 初始化全局配置,就是所有弹出层都配置的东西,但是如果自己配置了,那自己配制的优先级最高。

 

layer.ready(function() {

主页面一打开就执行的代码,可以是你的某个弹层,这样的话,页面一打开就蹦出一个弹层

});

 

layer.open({options}); 创建弹层

 

layer.alert(content,{options},function() {yes回调函数});

会有个确认按钮,yes回调里是确认按钮的回调函数

 

layer.confirm(content, options, yes, cancel) – 询问框

会有确认和取消两个按钮,yescancel是两个按钮的回调函数

layer.confirm(content,{options},function() {},function(yes回调函数) {cancel回调函数});

 

layer.msg(content,{options},function() {end 也就是层销毁后的回调函数});

这个提示框,作者很喜欢 默认会3秒后自动消失

 

layer.load(icon,{options});加载层 不会自动关闭,因为会在ajax回调体中关闭它,就是采纳数 都得到了,就不加载了, icon是加载风格

layer.load(2, {time: 10*1000}); 10秒内没关闭,就自己关了

 

layer.tips(content,#id,options);

就是这样子的一个小提示  ”#id”这个是哪个元素的小提示

 

layer.close(index); 关闭特定层

 //当你想关闭当前页的某个层时

 var index = layer.open();

   var index = layer.alert();

  var index = layer.load();

  var index = layer.tips();

  //正如你看到的,每一种弹层调用方式,都会返回一个index

  layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可

   

  //如果你想关闭最新弹出的层,直接获取layer.index即可

 layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的

   

  //当你在iframe页面关闭自身时

  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

  parent.layer.close(index); //再执行关闭   

 

 

layer.closeAll(type);关闭所有的type这个类型的层

    layer.closeAll(); //疯狂模式,关闭所有层

  layer.closeAll(‘dialog’); //关闭信息框

  layer.closeAll(‘page’); //关闭所有页面层

  layer.closeAll(‘iframe’); //关闭所有的iframe

    layer.closeAll(‘loading’); //关闭加载层

    layer.closeAll(‘tips’); //关闭所有的tips层    

 

 

layer.getChildFrame(selector, index) 获取iframe页的DOM  selectoriframe页面的选择器

var child = layer.getChildFrame(‘body’,index); 此时,child就是一个代表iframe中的’body’ 的元素

var element=document.getElementById(“div1”); 我觉得就跟这个一样,childelement        是一个级别,都是元素,之后就可以调用元素的方法了    DOM编程

 

layer.getFrameIndex(windowName); 获取特定iframe的索引

一般用于关闭某个弹出层的时候,获取索引,然后layer.close(index);

var index = parent.layer.getFrameIndex(window.name);

parent.layer.close(index);

 

 

layer.iframeAuto(index); iframe层高度会重新进行适应

 

layer.setTop(layero);当页面有很多layer窗口,设置这个会置顶这个窗口

用法: 写在options里面

zIndex: layer.zIndex, //重点1

success: function(layero){

      layer.setTop(layero); //重点2

}

 

 

layer.prompt(options,function() {yes回调函数});

layer.tab(options) – tab

layer.photos(options) – 相册层

版权声明:本文为tengyun原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/tengyun/p/8253129.html