type:基本层类型

layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

content - 内容

content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。类型:String/DOM/Array.

btn - 按钮

信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn:'我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1和按钮2的回调分别是yes和cancel,而从按钮3开始,则回调为btn3: function(){},以此类推。

success - 层弹出后的成功回调方法

类型:Function,默认:null.

当你需要在层创建完毕时即执行一些语句,可以通过该回调。success会携带两个参数,分别是当前层DOM 当前层索引。

layer.open({
content: '测试回调',
success: function(layero, index){
console.log(layero, index);
}
});

yes - 确定按钮回调方法

类型:Function,默认:null

该回调携带两个参数,分别为当前层索引、当前层DOM对象。如:

layer.open({
content: '测试回调',
yes: function(index, layero){
//do something
layer.close(index); //如果设定了yes回调,需进行手工关闭
}
});

cancel - 右上角关闭按钮触发的回调

类型:Function,默认:null

该回调同样只携带当前层索引一个参数,无需进行手工关闭。如果不想关闭,return false即可,如:

//只有当点击confirm框的确定时,该层才会关闭
cancel: function(index){
if(confirm('确定要关闭么')){
layer.close(index)
}
return false;
}

end - 层销毁后触发的回调

类型:Function,默认:null

无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。

  • layer.alert(content, options, yes) - 普通信息框
  • layer.confirm(content, options, yes, cancel) - 询问框
  • layer.msg(content, options, end) - 提示框
  • layer.load(icon, options) - 加载层
  • layer.tips(content, follow, options) - tips层
  • 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) - 关闭所有层
  • layer.style(index, cssStyle) - 重新定义层的样式
  • layer.title(title, index) - 改变层的标题
  • layer.getChildFrame(selector, index) - 获取iframe页的DOM
  • layer.setTop(layero) -置顶当前窗口
//通过这种方式弹出的层,每当它被选择,就会置顶。
layer.open({
type: 2,
shade: false,
area: '500px',
maxmin: true,
content: 'http://www.layui.com',
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
}
});

layer初步使用的更多相关文章

  1. postgres与osm初步使用

    layout: post title: postgres与osm初步使用 date: 2016-9-20 categories: blog tags: [地图开发] description:地图开发 ...

  2. DONET三层架构开发初步

    .NET三层架构开发初步 今天咱们来谈下三层架构.说到三层架构,搞过点程序的可能都知道三层架构的概念.但是对三层的精髓可能不是很了解. 首先说下自己对三层的理解,就是使用三个(多个)项目结合起来开发出 ...

  3. 利用layer实现MVC页面数据互交提示弹框

    需求说明: 一个表单页面,点击提交之后,进入后台进行一系列数据交互,然后将交互信息返回至页面中,并以弹框形式展示 应用场景: 添加.修改.删除数据后,返回数据操作是否成功,以及一些其他信息 前期准备: ...

  4. layer官方演示与讲解(jQuery弹出层插件)

    1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2. ...

  5. 范仁义web前端介绍课程---3、课程大纲(初步)

    范仁义web前端介绍课程---3.课程大纲(初步) 一.总结 一句话总结: 知识点脉络(知识架构):刚开始对这个稍微了解一下就可以了,在逐步的学习过程中,心里大概有这样一套知识点的脉络 二.范仁义前端 ...

  6. layer弹框层学习笔记

    这里对layer的笔记只是大概记录一下其使用过程,以便后续使用时快速回顾,更详细使用及介绍参考官网实例.链接在本文末 一 .初步了解layer-弹层之美 layer是一款近年来备受青睐的web弹层组件 ...

  7. 2022 年最受瞩目的新特性 CSS @layer 到底是个啥?

    步入 2022,CSS 的新特性层出不穷,而最近在 CSS 圈最受瞩目的新特性,非 CSS @layer 莫属. 本文,将用最简洁的语言,快速让读者们搞懂,到底什么是 CSS @layer 新规范. ...

  8. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  9. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

随机推荐

  1. Spring 学习一

    Spring工作机制及为什么要用? 1.springmvc将所有的请求都提交给DispacherServlet,他会委托应用系统的其他模块负责对请求进行真正的处理工作. 2.DispacherServ ...

  2. Bootstrap提示信息(标签、徽章、巨幕和页头)

    前面的话 在Bootstrap中,有一些组件用于提示信息,如 标签.徽章.巨幕和页头.本文将详细介绍Bootstrap提示信息 标签 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比 ...

  3. Java学习笔记之集合

    集合(Collection)(掌握) (1)集合的由来? 我们学习的是Java -- 面向对象 -- 操作很多对象 -- 存储 -- 容器(数组和StringBuffer) -- 数组而数组的长度固定 ...

  4. bash远程代码执行漏洞

    博客园新闻:http://news.cnblogs.com/n/504506/(如果以下有说错的地方请不吝指出,谢谢~) 详情可围观上面的链接.因为我们的服务器都是私有网环境,即使要修复也得等到下次安 ...

  5. Java基础语法<二> 字符串String

    1. 代码点与代码单元 Java字符串由char序列组成.大多数的常用Unicode字符使用一个代码单元就可以表示,而辅助字符需要一对代码单元表示. length()方法将返回采用UTF-16编码表示 ...

  6. oracle默认用户名及密码

    oracle默认用户名及密码(网摘) (1)user:           internal           password   :oracle     (2)user:           s ...

  7. Java工程师的终极书单

    本份Java工程师的终极书单只在专业的Java技术博客–天天编码上发布,没有授权任何网站与个人转载. 坚持阅读好书是学习Java技术的好方式.但是,市面上与Java技术相关的书籍可谓数不胜数,如何从这 ...

  8. JavaScript中异步编程

    一 关于事件的异步 事件是JavaScript中最重要的一个特征,nodejs就是利用js这一异步而设计出来的.所以这里讲一下事件机制. 在一个js文件中,如果要运行某一个函数,有2中手段,一个就是直 ...

  9. 学习笔记TF027:卷积神经网络

    卷积神经网络(Convolutional Neural Network,CNN),可以解决图像识别.时间序列信息问题.深度学习之前,借助SIFT.HoG等算法提取特征,集合SVM等机器学习算法识别图像 ...

  10. RobotFramwork安装报错name 'execfile' is not defined

    安装RobotFramwork的时候,提示了这个?是什么原因呢? 本机装的是python3.6: 经官方回复得知识因为python的版本不兼容该模块的安装. 官方认定版本是2.7,所以这里推荐大家玩p ...