layui的layer弹出层内置方法

这篇博客详细介绍了layui的layer模块中的一系列内置方法,包括layer.config用于全局配置,layer.open作为核心方法,以及layer.alert、layer.confirm、layer.msg等用于不同类型的提示和交互。还涵盖了layer.close关闭层,layer.style和layer.title修改层样式和标题,以及iframe相关的操作如layer.getChildFrame和layer.iframeSrc等。
摘要由CSDN通过智能技术生成

内置方法

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

/*
这是一个可以重要也可以不重要的方法,重要的是,它的权利真的很大,尤其是在模块化加载layer时,你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块,甚至还可以决定整个弹层的默认参数。而说它不重要,是因为多数情况下,你会发现,你似乎不是那么十分需要它。但你真的需要认识一下这位伙计。
*/

//如果您是采用seajs或者requirejs加载layer,你需要执行该方法来完成初始化的配置。比如:
layer.config({
   
  path: '/res/layer/' //layer.js所在的目录,可以是绝对目录,也可以是相对目录
});
//这样的话,layer就会去加载一些它所需要的配件,比如css等。  
//当然,你即便不用seajs或者requirejs,也可以通过上述方式设定路径             
        
//如果你是采用<script src="?a.js&layer.js">这种合并的方式引入layer,那么您需要在script标签上加一个自定义属性merge="true"。如:
<script src="?a.js&layer.js" merge="true">
这样的话,layer就不会去自动去获取路径,但你需要通过以下方式来完成初始化的配置
layer.config({
   
  path: '/res/layer/' //layer.js所在的目录,可以是绝对目录,也可以是相对目录
});

//如果采用 layui 加载 layer,无需设置 path。所以前置工作都是自动完成。

//但layer.config的作用远不止上述这样。它还可以配置层默认的基础参数,如:
layer.config({
   
  anim: 1, //默认动画风格
  skin: 'layui-layer-molv' //默认皮肤});
//除此之外,extend还允许你加载拓展的css皮肤,如:
layer.config({
   
  //如果是独立版的layer,则将myskin存放在./skin目录下
  //如果是layui中使用layer,则将myskin存放在./css/modules/layer目录下
  extend: 'myskin/style.css'
});

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

/*
由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中
*/
//页面一打开就执行弹层
layer.ready(function(){
   
  layer.msg('很高兴一开场就见到你');
});     

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

/*
基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引
*/
var index = layer.open({
   
  content: 'test'
});
//拿到的index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数。    

layer.alert(content, options, yes) - 普通信息框

/*
它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可
*/
//eg1
layer.alert('只想简单的提示');        
//eg2
layer.alert('加了个图标', {
   icon: 1
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值