layer作为layui的代表作,是国内最多人使用的Web弹层组件。因为layer在layui体系中的位置比较特殊,甚至让许多人误以为layui=layer ui(包括我,之前一直都搞不懂它们的关系),所以再次强调layer只是layui的一个弹层模块。
在我还没有接触layer的时候,做弹层这一块的时候,只能靠css和js结合来实现,比如说在一个案例中,做项目变更的时候,不可以方便快速地实现:
代码部分:
缺点:代码繁多而又复杂,编写时间长,效率不高,一不小心写错一句代码,就会前功尽弃,有时候面对这么多代码,头痛不已,找个半天都找不出来
而Layer有两种使用方法一是可以独立使用,二是通过Layui模块化使用:
(1)
如果你只是单独使用layer,你可以去layer独立版本官网里面下载组件包,你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js,通过script标签引入layer.js后,直接使用即可:
(2)
如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js通过layui.use('layer',callback)加载模块:
除了上面有所不同,其他的完全一致。
在使用layer的时候,一般都是在layui中直接使用layer。下面来看个简单的例子:
通过layui.use('layer',‘table’)加载模块,相比之下,代码简洁,程序简单
Layer还有二十多种使用方法,介绍几种常用的方法:
(1)Layer.open(options)—原始核心方法
基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数,另外,该文档统一采用options作为基础参数的标识例子:
拿到的layerIndex是一个重要的凭据,它相当于layer.Close(index)等方法的必传参数。
(2)layer.alert(content, options, yes) - 普通信息框:‘’
它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。如
(3)layer.confirm(content,options, yes, cancel) - 询问框
类似系统confirm,但却远胜confirm,另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。如:
(4)layer.load(icon, options) - 加载层
load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。如:
还有:layer.ready(callback) - 初始化就绪
layer.tips(content,follow, options) - tips层
layer.close(index) - 关闭特定层,
layer.closeAll(type) - 关闭所有层
layer.style(index,cssStyle) - 重新定义层的样式,
layer.title(title,index) - 改变层的标题
layer.getChildFrame(selector,index) - 获取iframe页的DOM,layer.getFrameIndex(windowName) - 获取特定iframe层的索引
layer.iframeAuto(index) - 指定iframe层自适应
layer.iframeSrc(index,url) - //重置特定iframe url
layer.setTop(layero) -置顶当前窗口
layer.full()、layer.min()、layer.restore() - 手工执行最大小化
layer.prompt(options, yes) - 输入层
layer.photos(options) - 相册层
layer.tab(options) - tab层等等的方法,
因为这些方法我还没有接触和学习到,所以先不做任何的介绍,望见谅。