弹出层组件-layui.layer

弹出层组件文档-layui.layer

    layer只是作为layui的一个弹层模板,由于layer可以独立使用,也可以通过layui模块化使用,所以请按照实际需求来选择。

  1. 作为独立组件使用,可以去layer独立版本官网下载组件包。需要在你的页面上引入jQuery1.8以上的任意版本,并引入layer.js。

  1. layui模块化使用,直接在官网下载layui框架使用即可,无需引入jQuery和layer.js,但需要引入layui.css和layui.js。

基础参数

    我们提到的基础参数主要指调用方法是用到的配置项,如:layer.open({content:str})等,其中的content即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,不需要所有都去配置,大多数都是可选的。其中的layer.open、layer.msg就是内置方法。

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,默认:“”;

   skin不仅允许你传入layer样式class名,还可以传入你自定义的class名,这意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lan,layui-layer-molv。以下是一个自定义风格的简单的例子:

area-宽高

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

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

offset-坐标

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

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

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

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

   信息框默认不显示图标。当你显示图标时,默认皮肤可以传入0-6,如果是加载层,可以传入0-2。如:

btn-按钮

   类型:String/Array,默认:’确认’

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

btnAlign-按钮排序

   类型:String,默认:r;

   你可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。该参数可支持的赋值如下:

closeBtn-关闭按钮

   类型:String/Boolean,默认:1

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

shade-遮罩

   类型:String/Array/Boolean,默认:0.3

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

shadeClose-是否点击遮罩关闭

  类型:Boolean,默认:false

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

time-自动关闭所需毫秒

   类型:Number,默认:0

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

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

   类型:String,默认:空字符

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

anim-弹出动画

   类型:Number,默认:0

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

isOutAnim-关闭动画

  类型:Boolean,默认:true

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

maxmin-最大最小化

   类型:Boolean,默认:false

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

fixed-固定

   类型:Boolean,默认:trun

   即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed:false即可。


版权声明:本文为Meaning_of_sugar原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。