Layui 弹出层模块

Layui 弹出层模块

使用场景
由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

  1. 作为独立组件使用:
    如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。
    调用方式:通过script标签引入layer.js后,直接用即可。
  2. layui 模块化使用:
    如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js
    调用方式:通过layui.use(‘layer’, callback)加载模块

基础参数
基础参数主要指调用方法时用到的配置项,如:layer.open({content: ‘’})、layer.msg(’’, {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,不需要所有都去配置,大多数都是可选的。而其中的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

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(){},以此类推。

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来控制点击弹层外区域关闭。

anim - 弹出动画
类型:Number,默认:0
动画全部采用CSS3。这意味着除了ie6-9,其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。
在这里插入图片描述

layer.alert(content, options, yes) - 普通信息框
一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。如

layer.confirm(content, options, yes, cancel) - 询问框
类似系统confirm,但却远胜confirm,另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值