专栏首页爱明依页面弹出层组件layer的用法

页面弹出层组件layer的用法

一:页面引入和核心js文件 layer.js

<script src="layer.js的路径"></script>

二:基础参数:

基本层类型

类型:Number,默认:0

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

标题

类型:String/Array/Boolean,默认:'信息'

title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

内容

类型:String/DOM/Array,默认:''

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

  1. /!*
  2. 如果是页面层
  3. */
  4. layer.open({
  5. type: 1,
  6. content: '传入任意的文本或html' //这里content是一个普通的String
  7. });
  8. layer.open({
  9. type: 1,
  10. content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
  11. });
  12. //Ajax获取
  13. $.post('url', {}, function(str){
  14. layer.open({
  15. type: 1,
  16. content: str //注意,如果str是object,那么需要字符拼接。
  17. });
  18. });
  19. /!*
  20. 如果是iframe层
  21. */
  22. layer.open({
  23. type: 2,
  24. content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
  25. });
  26. /!*
  27. 如果是用layer.open执行tips层
  28. */
  29. layer.open({
  30. type: 4,
  31. content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
  32. });

样式类名

类型:String,默认:''

skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lanlayui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子

  1. //单个使用
  2. layer.open({
  3. skin: 'demo-class'
  4. });
  5. //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
  6. layer.config({
  7. skin: 'demo-class'
  8. })
  9. //CSS
  10. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
  11. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
  12. body .demo-class .layui-layer-btn a{background:#333;}
  13. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
  14. 加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。

宽高

类型:String/Array,默认:'auto'

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']

坐标

类型:String/Array,默认:垂直水平居中

offset默认情况下不用设置。但如果你不想垂直水平居中,你还可以进行以下赋值:

备注

offset: '100px'

只定义top坐标,水平保持居中

offset: ['100px', '50px']

同时定义top、left坐标

offset: 't'

快捷设置顶部坐标

offset: 'r'

快捷设置右边缘坐标

offset: 'b'

快捷设置底部坐标

offset: 'l'

快捷设置左边缘坐标

offset: 'lt'

快捷设置左上角

offset: 'lb'

快捷设置左下角

offset: 'rt'

快捷设置右上角

offset: 'rb'

快捷设置右下角

关闭按钮

类型:String/Boolean,默认:1

layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0

是否点击遮罩关闭

类型:Boolean,默认:false

如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。

弹出动画

类型:Number,默认:0

我们的出场动画全部采用CSS3。这意味着除了ie6-9,其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。另外需要注意的是,3.0之前的版本用的是 shift 参数

最大最小化。

类型:Boolean,默认:false

该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

层弹出后的成功回调方法

类型:Function,默认:null

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

  1. layer.open({
  2. content: '测试回调',
  3. success: function(layero, index){
  4. console.log(layero, index);
  5. }
  6. });

确定按钮回调方法

类型:Function,默认:null

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

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

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

类型:Function,默认:null

该回调携带两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero),默认会自动触发关闭。如果不想关闭,return false即可,如;

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

初始化就绪

由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如:

  1. /页面一打开就执行弹层
  2. layer.ready(function(){
  3. layer.msg('很高兴一开场就见到你');
  4. });

原始核心方法

基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数,另外,该文档统一采用options作为基础参数的标识例子:

  1. var index = layer.open({
  2. content: 'test'
  3. });
  4. //拿到的index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数。

加载层

type:3的深度定制。load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。

  1. /eg1
  2. var index = layer.load();
  3. //eg2
  4. var index = layer.load(1); //换了种风格
  5. //eg3
  6. var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒
  7. //关闭
  8. layer.close(index);

获取iframe页的DOM

当你试图在当前页获取iframe页的DOM元素时,你可以用此方法。selector即iframe页的选择器

  1. layer.open({
  2. type: 2,
  3. content: 'test/iframe.html',
  4. success: function(layero, index){
  5. var body = layer.getChildFrame('body', index);
  6. var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
  7. console.log(body.html()) //得到iframe页的body内容
  8. body.find('input').val('Hi,我是从父页来的')
  9. }
  10. });

获取特定iframe层的索引

此方法一般用于在iframe页关闭自身时用到。

  1. //假设这是iframe页
  2. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  3. parent.layer.close(index); //再执行关闭

tab层

tab层只单独定制了一个成员,即tab: [],这个好像没有什么可介绍的,简单粗暴看例子

  1. layer.tab({
  2. area: ['600px', '300px'],
  3. tab: [{
  4. title: 'TAB1',
  5. content: '内容1'
  6. }, {
  7. title: 'TAB2',
  8. content: '内容2'
  9. }, {
  10. title: 'TAB3',
  11. content: '内容3'
  12. }]
  13. });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 搭建行政资源管理系统 项目开发环境

    本次的项目开发采用的是Spring MVC + MyBatis开发模式,并且所有的数据验证都将通过拦截器完成。那么在整个项目的整合过程之中,有部分的操作是可以进...

    爱明依
  • webSocket 如何实现服务器端 想页面推送实时数据? 动态数据?如何进行连接?

    本次实现的功能是采用webSocket 实现客户端实时监控后台服务运行情况和日志信息的实时和动态展示。

    爱明依
  • jstack:java 堆栈工具

    生成线程快照的主要目的就是定位线程出现长时间停顿的原因,如线程死锁,死循环请求外部资源导致的长时间等待等都是导致线程长时间停顿的常见原因。线程出现停顿的时候通过...

    爱明依
  • python-分解多列表嵌套

        for first_layer in lists:         if isinstance(first_layer,list):          ...

    py3study
  • layer小提示弹框验证

    当验证失败的时候,会出现弹框进行提示,如果直接写alert的话显得太原始了,放一个layer验证提示弹框代码在里面,ui瞬间变得有模有样了 。

    祈澈菇凉
  • CAGradientLayer颜色渐变器

    下面是我用上面的代码实现的最终效果,startPoint是(0,0),endPoint是(1,1)。

    周希
  • layer关闭弹窗

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

    似水的流年
  • 雷亚尔上等深电路的逻辑特性(CS.CC)

    本文给出了一个实值计算的浸入曼定理。我们定义了在实数上运行的电路,并证明了多项式大小和常数深度的电路族精确地决定了可以在一阶逻辑中定义的关于r -结构的Cuck...

    用户7236395
  • Layui 弹出框

    layui.use('layer', function(){ var layer = layui.layer;

    用户5760343
  • 《Learning Scrapy》(中文版)第4章 从Scrapy到移动应用选择移动应用框架创建数据库和集合用Scrapy导入数据创建移动应用创建数据库接入服务将数据映射到用户界面映射数据字段和用户组

    有人问,移动app开发平台Appery.io和Scrapy有什么关系?眼见为实。在几年前,用Excel向别人展示数据才可以让人印象深刻。现在,除非你的受众分布很...

    SeanCheney

扫码关注云+社区

领取腾讯云代金券