layui框架——弹出层layer[通俗易懂]

layui框架——弹出层layer[通俗易懂]两种调用方法:1、引用独立的layer.js文件引入好layer.js后,直接用即可<scriptsrc=”layer.js”></script><script>layer.msg(‘hello’);</script>2、调用layui中的layer模块layui.use(‘layer’,function(){…

大家好,又见面了,我是你们的朋友全栈君。

 两种调用方法:

1、引用独立的layer.js文件

引入好layer.js后,直接用即可
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

2、调用layui中的layer模块

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

基础参数

1、type:基本层类型

使用方法:

layui.use('layer',function(){
    var layer=layui.layer;
    layer.open({
        type:0
    })
})

 layer提供了5种层类型,分别为0~4,默认为0。其对应形式如下:

layui框架——弹出层layer[通俗易懂]

2、title-标题

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

String:标题文本

Array:例如title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意CSS样式

Boolean:使用title:false可以不显示标题栏

3、content-内容

类型:String、DOM、Array,默认:‘’

String:可以是任意文本或html

DOM:该元素要放在body最外层,否则可能被其它的相对元素影响。dom元素不会在原位置显示,会移动到弹出层中;退出弹出层后会在原位置显示,最好将DOM容器设置为display:none。实例如下

<div id="test" style="background-color: blue;width:100%;height:200px;"></div>
<script>
    layui.use('layer',function(){
        var layer=layui.layer;
        layer.open({
            type:1,
            content:$("#test")
        })
    })
</script>

执行结果

layui框架——弹出层layer[通俗易懂]

Array:示例如下

如果是iframe层

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
}); 

如果使用layer.open执行tips层:

layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});  

4、skin-样式类名

类型:String,默认:‘’

5、area-宽高

类型:String、Array,默认‘auto’

默认是宽高都自适应的

只定义宽度,高度自适应         area: ‘500px’

定义宽高                                     area: [‘500px’, ‘300px’]

6、offset-坐标

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

备注
offset: ‘auto’ 默认坐标,即垂直水平居中
offset: ‘100px’ 只定义top坐标,水平保持居中
offset: [‘100px’, ’50px’] 同时定义top、left坐标
offset: ‘t’ 快捷设置顶部坐标
offset: ‘r’ 快捷设置右边缘坐标
offset: ‘b’ 快捷设置底部坐标
offset: ‘l’ 快捷设置左边缘坐标
offset: ‘lt’ 快捷设置左上角
offset: ‘lb’ 快捷设置左下角
offset: ‘rt’ 快捷设置右上角
offset: ‘rb’ 快捷设置右下角

7、icon-图标。信息框和加载层的私有参数

类型:Number,默认:-1(信息框)/0(加载层)

信息框默认不显示图标,想显示图标时,可以传入0~6;加载层可以传入0~2

代码:

layui.use('layer',function(){
    layer=layui.layer;
    layer.msg('有表情地提示',{
        icon:1
    });
})

当icon=0时:

layui框架——弹出层layer[通俗易懂]

当icon=1时:

layui框架——弹出层layer[通俗易懂]

当icon=2时

layui框架——弹出层layer[通俗易懂]

当icon=3时

layui框架——弹出层layer[通俗易懂]

当icon=4时

layui框架——弹出层layer[通俗易懂]

当icon=5时

layui框架——弹出层layer[通俗易懂]

当icon=6时

layui框架——弹出层layer[通俗易懂]

当icon=16时

 layui框架——弹出层layer[通俗易懂]

8、btn-按钮

类型:String、Array,默认:‘确认’

信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。

定义一个按钮      btn: ‘我知道了’

定义多个按钮      btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]

按钮1的回调是yes,从按钮2开始,回调为btn2:function(){}

layui.use('layer',function(){
    var layer=layui.layer;
    layer.open({
        type:1,
        content:'测试',
        btn:['按钮一','按钮二','按钮三'],
        yes:function(index,layero)
        {
            //index为当前层索引
            //layero 为 弹出层对象
            //在回调函数末尾添加 “return false”可以禁止点击该按钮关闭弹出层
            return false;
        },
            btn2:function(index,layero){//按钮二回到
            return false;
        },
        btn3:function(index,layero){//按钮三回调
            return false;
        },
        cancel:function(){//右上角关闭毁回调
            //return false;
        }
    })
})

9、btnAlign-按钮排列

类型:String,默认:r

备注
btnAlign: ‘l’ 按钮左对齐
btnAlign: ‘c’ 按钮居中对齐
btnAlign: ‘r’ 按钮右对齐。默认值,不用设置

10、closeBtn-关闭按钮

类型:String、Boolean,默认:1

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

closeBtn:0                                                                              closeBtn:1

layui框架——弹出层layer[通俗易懂]    layui框架——弹出层layer[通俗易懂]

closeBtn:2

layui框架——弹出层layer[通俗易懂]

11、shade-遮罩

类型:String、Array、Boolean,默认0.3,即透明度为0.3的黑色背景(#000)

自定义颜色       shade: [0.8, ‘#393D49’]

不显示遮罩       shade: 0

12、shadeClose-是否点击遮罩关闭

类型:Boolean,默认false

如果shade存在,那么设置shadeClose:true可以使得点击遮罩关闭弹出层

13、time-自动关闭所需毫秒

类型:Number,默认:0

默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)

14、id-用于控制弹层唯一标识

类型:String,默认:空字符

设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式

15、anim-弹出动画

备注
anim:-1 不显示动画
anim: 0 平滑放大。默认
anim: 1 从上掉落
anim: 2 从最底部往上滑入
anim: 3 从左滑入
anim: 4 从左翻滚
anim: 5 渐显
anim: 6 抖动

16、isOutAnim-关闭动画

类型:Boolean,默认:true

默认情况下,关闭层时会有一个过度动画。如果你不想开启,设置 isOutAnim: false 即可

17、fixed-固定

类型:Boolean,默认:true,即鼠标滚动时,层是否固定在可视区域。

如果不想,设置fixed: false即可

默认情况下,背景是利用鼠标滚动的

18、resize-是否允许拉伸

类型:Boolean,默认:true

默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效

19、resizing-监听窗口拉伸动作(配合上一属性使用)

resizing: function(layero){
    //当前层的DOM对象
    console.log(layero);
}   

20、scrollbar-是否允许浏览器出现滚动条

类型:Boolean,默认:true,默认允许浏览器滚动

如果设定scrollbar: false,则屏蔽,即使浏览器存在滚动条,在弹出层出现后,也会消失

21、maxWidth-最大宽度

类型:Number,默认:360

请注意:只有当area: ‘auto’时,maxWidth的设定才有效。

22、maxHeight-最大高度

类型:Number,默认:无

请注意:只有当高度自适应时,maxHeight的设定才有效。

23、move-触发拖动的元素

类型:String/DOM/Boolean,默认:’.layui-layer-title’,即默认是触发标题区域拖拽。

如果你想单独定义,指向元素的选择器或者DOM即可。如move: ‘.mine-move’

还可以配置设定move: false来禁止拖拽

24、moveOut-是否允许拖拽到窗口外

类型:Boolean,默认:false

默认只能在窗口内拖拽,如果你想让拖到窗外,那么设定moveOut: true即可

25、moveEnd-拖动完毕后的回调方法

类型:Function,默认:null

默认不会触发moveEnd,如果你需要,设定moveEnd: function(layero){}即可。其中layero为当前层的DOM对象

26、tips-tips方向和颜色

类型:Number/Array,默认:2

对应关系:1-上    2-右    3-下    4-左

tips层的私有参数。支持四个方向,通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定tips: [1, ‘#c00’]

27、tipsMore-是否允许多个tips

类型:Boolean,默认:false

设置tipsMore: true,意味着不会销毁之前的tips层。

28、回调方法

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

yes:第8项提到的“按钮一”的回调方法,在回调方法中需要手动关闭层

layui.use('layer',function(){
    var layer=layui.layer;
    layer.open({
        type:1,
        content:'<div id="aaa" style="width:200px;height:200px;background-color: red;"></div>',
        btn:['按钮一','按钮二','按钮三'],
        closeBtn:2,
        move:'#aaa',
        yes:function(index,layero)
        {
            layer.close(index);//需手动关闭 弹出层
        },
        btn2:function(index,layero){
            //不需要手动关闭 弹出层
        }
     })
})

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

end:层销毁后触发的回调

full/min/restore-分别代表最大化、最小化、还原后触发的回调

内置方法

1、layer.config(options)-初始化全局配置

2、layer.ready(callback)-初始化就绪

主要是因为layer加载需要时间,也许很快,但过程仍然存在。如果你想在一开始就打开的话,可能会失出错,所以需要将代码放在layer.ready()中。

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

3、layer.open(options)-原始核心方法

4、layer.alert(content,opeions,yes)-普通信息框

//实例一
layer.alert('只想简单的提示');        
//实例二
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。
//实例三
layer.alert('有了回调', function(index){
  //do something
  
  layer.close(index);
}); 

实例一:                                                                                     实例二:

layui框架——弹出层layer[通俗易懂]         layui框架——弹出层layer[通俗易懂]

5、layer.confirm(content,options,yes,cancel)-询问框

layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
    //do something
    layer.close(index);
});

layui框架——弹出层layer[通俗易懂]

6、layer.msg(content,options,end)-提示框

layer.msg('同上', {
      icon: 1,
      time: 2000 //2秒关闭(如果不配置,默认是3秒)
    }, function(){
      //关闭后执行
    }
); 

layui框架——弹出层layer[通俗易懂]

7、layer.load(icon,options)-加载层

icon:Number类型,0~2,默认0,(可以不传)

该方法是“type:3”的深度定制

需要自己手动关闭,或者定义超时时间

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

icon=0                                      icon=1                                       icon=2

layui框架——弹出层layer[通俗易懂]    layui框架——弹出层layer[通俗易懂]      layui框架——弹出层layer[通俗易懂]

 

8、layer.tips(content,follow,options)-tips层

该方法是type:4的深度定制

//实例一
layer.tips('只想提示地精准些', '#id');
//实例二
$('#id').on('click', function(){
    var that = this;
    layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可
});
//实例三
layer.tips('在上面', '#id', {
    tips: 1
});

9、layer.close(index)-关闭特顶层

layer.close(index); //关闭指定层

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

//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭   

10、layer.cloasAll(type)-关闭所有层

layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层    

11、layer.style(index,cssStyle)-重新定义层的样式

该方法对loading层和tips层无效。参数index为层的索引,cssStyle允许你传入任意的css属性

//重新给指定层设定width、top等
layer.style(index, {
    width: '1000px',
    top: '10px'
}); 

12、layer.title(title,index)-改变层的标题

layer.title('标题变了', index)

13、layer.getChildFrame(selector,index)-获取iframe页的DOM

selector是iframe页的选择器

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

14、layer.getFrameIndex(windowName)-获取特定iframe层的索引

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

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

15、layer.iframeAuto(index)-指定iframe层自适应

调用该方法,iframe层的高度会重新进行适应

16、layer.iframeSrc(index,url)-重置iframe的url

layer.iframeSrc(index, 'http://sentsin.com')

17、layer.setTop(layero)-置顶当前窗口

18、layer.prompt(options,yes)-输入层

options可传入基础参数,也可以传入prompt专用的属性。prompt专用属性有:

formType: 1,         //输入框类型,支持0(文本)默认1(密码)2(多行文本)

value: ”,                 //初始时的值,默认空字符

maxlength: 140,   //可输入文本的最大长度,默认500

layer.prompt({
        formType: 2,
        value: '初始值',
        title: '请输入值',
        area: ['800px', '350px'] //自定义文本域宽高
    }, function(value, index, elem){
        alert(value); //得到value
        layer.close(index);
    });

layui框架——弹出层layer[通俗易懂]

19、layer.tab(options)-tab层

layer.tab({
    area: ['600px', '300px'],
    tab: [{
    title: 'TAB1', 
    content: '内容1'
    }, {
        title: 'TAB2', 
        content: '内容2'
    }, {
        title: 'TAB3', 
        content: '内容3'
    }]
}); 

layui框架——弹出层layer[通俗易懂]

20、layer.photos(options)-相册层

相册层,也可以称之为图片查看器。photos支持传入json和直接读取页面图片两种方式

1、如果是json传入:

$.getJSON('/jquery/layer/test/photos.json', function(json){
    layer.photos({
        photos: json
        ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
    });
}); 

其中json格式如下:

{
    "title": "", //相册标题
    "id": 123, //相册id
    "start": 0, //初始显示的图片序号,默认0
    "data": [   //相册包含的图片,数组格式,可以有多个
    {
        "alt": "图片名",
        "pid": 666, //图片id
        "src": "", //原图地址
        "thumb": "" //缩略图地址
    }
  ]
}

2、如果是直接读取页面图片,那么需要指向图片的父容器

html代码:

<div id="layer-photos-demo" class="layer-photos-demo">
    <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
    <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>

javascript代码:

//调用示例
layer.photos({
    photos: '#layer-photos-demo',
    anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
}); 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135688.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • linux route 刷新_linux route命令详解

    linux route 刷新_linux route命令详解考试题一:linux下如何添加路由(百度面试题)以上是原题,老男孩老师翻译成如下3道题。a.如何用命令行方式给linux机器添加一个默认网关,假设网关地址为10.0.0.254?b.192.168.1.0网段,192.168.1.1网关的某一服务器想连入172.16.1.0/24段,该如何添加路由(奇虎360)c.如果添加一个主机路由?请分别解答。解答:route-net172.16.1.0…

  • qi接收启动协议_基于QI协议的无线充电通信系统「建议收藏」

    qi接收启动协议_基于QI协议的无线充电通信系统「建议收藏」龙源期刊网http://doc.docsou.com基于QI协议的无线充电通信系统作者:胡江浩张中炜来源:《中国新通信》2016年第03期【摘要】无线充电技术的学名又叫做无线电能传输,其原理非常类似于变压器,都是通过发射电路产生一个交变电流通过初级线圈,从而在初级线圈上感应出一个交变电磁场,次级线圈通过接收该交变电磁场从而产生感应电流,通过电磁感应实现能源的传输。该文主要介绍了一种无线充电领域中…

  • Python_Python安装包下载[通俗易懂]

    Python_Python安装包下载[通俗易懂]PythonImagingLibrary(PIL):http://www.pythonware.com/products/pil/pywin32:http://sourceforge.net/projects/pywin32/files/pywin32/Build%20217/

    2022年10月29日
  • 清华大学团队:人脸识别爆出巨大丑闻,15分钟解锁19款手机

    清华大学团队:人脸识别爆出巨大丑闻,15分钟解锁19款手机1清华大学的RealAI团队15分钟解锁19款手机刚刚,清华大学的一条重大发现,利用人脸识别技术的漏洞,“15分钟解锁19个陌生智能国产手机”的事件,引发无数网友关注。据悉,清华大学的RealAI团队共选取了20款手机,其中1款是国外的,另外19款都是我们国产的智能手机,居来自排名前五的国产手机品牌,每一品牌下选取了3-4款不同价位的手机型号,覆盖低端机到旗舰机。1)测试步骤如下:第一步,清华大学的测试人员,把19部国产手机,人脸识别全部绑定为旁边的“1号同学”;

  • Dedecms列表页标签list/pagelist使用方法及pagelist的样式

    Dedecms列表页标签list/pagelist使用方法及pagelist的样式

  • 连接失败连接区间变量

    连接失败连接区间变量

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号