layer是作为Layui【经典模块化前端框架】的一个弹层模块,由于其用户基数较大,所以把layer作为独立组件来维护。

基础参数:

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

1、type - 基本层类型

类型:Number,默认:0

layer提供了5种层类型。可传入的值有:0(信息框,默认),1(页面层),2(iframe层),3(加载层),4(tips层)。 若采用的是 layer.open({type: 1}) 方式调用,则type为必填项(信息框除外)

2、title - 标题

类型:String/Array/Boolean,默认:'信息'

title支持三种类型的值,

若传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;

若还需要自定义标题区域样式,那么可以写title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;

若不想显示标题栏,可以t写 title: false

3、content - 内容

类型:String/DOM/Array,默认:''

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

 /!*
如果是页面层
*/
layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type: 1,
content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
layer.open({
type: 1,
content: str //注意,如果str是object,那么需要字符拼接。
});
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

4、area - 宽高

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

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

5、maxWidth - 最大宽度

类型:,默认:360

请注意:只有当area: 'auto'时,maxWidth的设定才有效。

Layui 弹出层组件——layer的更多相关文章

  1. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  2. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  3. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  4. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  5. layui弹出层回调的使用

    <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...

  6. easyDialog 简单、实用的弹出层组件

    easyDialog 简单.实用的弹出层组件 使用背景 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找 ...

  7. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  8. 一步步编写avalon组件01:弹出层组件

    avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...

  9. adminlte+layui框架搭建3 - layui弹出层

    在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = ...

随机推荐

  1. BZOJ 1109 [POI2007]堆积木Klo(树状数组)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1109 [题目大意] Mary在她的生日礼物中有一些积木.那些积木都是相同大小的立方体. ...

  2. 【置换群】【枚举约数】hdu6038 Function

    把b数组的所有置换群求出来,用数组记录一下每个大小所出现的次数. 然后求a的置换群,对每个置换群求能被其整除的b的置换群的大小总和(只有这些才能满足构造出一个f,且不自相矛盾),然后把它们全都乘起来就 ...

  3. error C2248: 'MyString::pCharArray' : cannot access private member declared in class 'MyString'

    std::ostream & operator<<(std::ostream os,const MyString & mystr){os<<mystr.pCha ...

  4. Oracle SQL执行缓慢的原因以及解决方案

     以下的文章抓哟是对Oracle SQL执行缓慢的原因的分析,如果Oracle数据库中的某张表的相关数据已是2亿多时,同时此表也创建了相关的4个独立的相关索引.由于业务方面的需要,每天需分两次向此表中 ...

  5. Mac OS X 11年9个版本的历经变化

    本月苹果将发布OS X 10.8 Mountain Lion,是Mac OS X系统在其11年生命长河中的第9个版本.2001年,刚从鬼门关爬回来的苹果决定在OS X上做一个赌注,因为他们已经浪费了1 ...

  6. js中setinterval 的相关使用

    1.setinterval 方法 setinterval()是定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式. 2.创建一个setinterval 方法 setInterval(s ...

  7. 万里长征第二步——django个人博客(第二步 ——日志记录器)

    定义日志记录器 可以在setting.py里设置日志记录器 # 自定义日志输出信息 LOGGING = { 'version': 1, 'disable_existing_loggers': True ...

  8. 如何在windows下的Python开发工具IDLE里安装其他模块

    以安装Httplib2模块为例 1 下载模块 到 “https://code.google.com/p/httplib2/” 下载一款适合你的压缩包“httplib2-0.4.0.zip” 2 解压下 ...

  9. android使用C/C++调用SO库

    有时候,我们反编译apk得到一个so库,如果直接使用这个so库的话,必须使用原来so库同样的package名字,才能用.这样人家反编译你的apk,就知道你侵犯了人家的版权.为了达到混淆的目的,我们可以 ...

  10. delphi 自定义内存管理

    1.主要通过GetMemoryManager来hook原来的内存管理. 2.通过SetMemoryManager来设置你自己的新的内存管理,可以用一个内存池来优化和管理程序的内存调用情况. proce ...