Layer——弹出层

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年5月16 日

Layui.layer弹层组件文档，layer是layui的代表作，也只是作为layui的一个弹层模块。Layer可以作为独立组件来使用，也可以通过layui模块化使用，至于使用哪一种
可以按照实际的需求选择，不过文档都要以本页为主。

两种使用方法的使用语法以及效果实例如下，

作为独立组件使用 layer：

独立使用:layer.msg(‘单独使用’,{icon:1, skin:“layui-layer-molv” });

在layui中使用 layer：

在layui中使用layer

             layui.use('layer', function () {var layer = layui.layer;layer.msg('模块化使用',{ icon: 0, skin: "layui-layer-molv" });});

基础参数:

这里所提到的基础参数主要指调用方法时用到的配置项，如：

layer.open({content: ‘’})layer.msg(’’, {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。

Layui.layer弹层组件文档里面有多个弹出层，下面使用了三种，见代码截图如下：

前两种的简析与用法请看前面的说明，layer .tab(options)-tab层说明以及其他弹层相关说明如下。

layer.tab(options) – tab层：

下tab层只单独指定了一个成员，即弹出tab独立层面。可以给tab层设置页面的宽高，给里面的每个滑动页面设置标题、输入不同的内容。Tab层的实现效果如，

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

提示框的使用率是非常高的，因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失，它有许多可能在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。

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。如：

area - 宽高

类型：String/Array，默认：‘auto’

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

skin - 样式类名

类型：String，默认：’’

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子

content - 内容

类型：String/DOM/Array，默认：’’

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

Layer——弹出层相关推荐

layer弹出层闪退_layer弹出层详解
1.layer 弹出层iframe页面关闭自身 function closeFrame() { var index = parent.layer.getFrameIndex(window.name); ...
html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
layer文件ajax上传,layer弹出层数据传输到content里面
在项目中使用layer弹出层的时候,遇到一个问题,就是利用ajax请求后台数据成功时,调用layer弹出层(iframe),如何把数据传到iframe里面去? 经过百度,发现,使用js把数据拼接起来, ...
layer弹出层扩展自定义样式
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 官网 http://layer.layui.com/ l ...
Layer弹出层关闭后刷新父页面
一.Layer弹出层关闭后刷新父页面 //编辑 $("#edit").on("click", function(){var id = getIdSelectio ...
layer 弹出层回调函数调用弹出层页面函数
1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...
layer弹出层闪退_jQuery使用Layer弹出层插件闪退问题
一.前言巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后 ...
jQuery引起的用layer弹出层上传文件不能获取文件名的解决(thinkphp5)
一.问题在用thinkphp5做到用layer弹出层上传文件过程中,一直不能成功.详细代码如下: HTML代码: <div id="importBox" v-show=&q ...
layer弹出层的位置设置
1.给弹出层id及信息,方便获取其宽度和高度 var index = layer.msg(data.info,{id:'reg-id'}); 2.根据具体情况计算出弹出层的top和left,用offs ...
layer 弹出层传递参数
layer 弹出层轻量好用,一直喜欢用,但是却没有弹出层传参的接口,迫于无奈只能Url地址传参,总所周知,这个可是限制大小的,百度一番,看看大神们怎么处理,结果就感觉所有回答都是Ctrl+C 加 Ct ...

Layer——弹出层

Layer——弹出层相关推荐

最新文章

热门文章