Layui 弹出层组件——layer
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的更多相关文章
- Layui 弹出层组件——layer的模块化开发实例应用
Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...
- layer/layui弹出层插件bug
<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...
- Layui弹出层、日期和时间选择、即时通讯、分页
Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...
- layui弹出层之应用实例讲解
从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...
- layui弹出层回调的使用
<%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...
- easyDialog 简单、实用的弹出层组件
easyDialog 简单.实用的弹出层组件 使用背景 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找 ...
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
- 一步步编写avalon组件01:弹出层组件
avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...
- adminlte+layui框架搭建3 - layui弹出层
在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = ...
随机推荐
- Codeforces Round #476 (Div. 2) [Thanks, Telegram!] ABCDE
修仙场,没脑子,C边界判错一直在写mdzz..D根本没怎么想. 第二天起来想了想D这不是水题吗立马A了.看了看E一开始想分配问题后来发觉想岔了,只需要每次都把树最后分配的点移到最前面就好了. A. P ...
- [POJ3581]Sequence
[POJ3581]Sequence 题目大意: 给定序列\(A_{1\sim n}\),其中\(A_1\)为最大的数.要把这个序列分成\(3\)个非空段,并将每一段分别反转,求能得到的字典序最小的序列 ...
- (原创)Stanford Machine Learning (by Andrew NG) --- (week 10) Large Scale Machine Learning & Application Example
本栏目来源于Andrew NG老师讲解的Machine Learning课程,主要介绍大规模机器学习以及其应用.包括随机梯度下降法.维批量梯度下降法.梯度下降法的收敛.在线学习.map reduce以 ...
- Perl正则表达式
perl正则表达式就是通过一串特别设计的字符串,可以按照我们的需求匹配.替换.转化目标字符串.本文主要是对一些常用的正则表达以及语法的总结以及举例,供广大喜爱Perl的同学交流学习. 操作符: =~ ...
- Java编程思想学习(三)----第三章:操作符
3.2使用Java操作符 操作符接受一个或多个参数,并生成一个新值. 操作符作用于操作数,生成一个新值.有些操作符可以改变操作数自身的值.几乎所以的操作符都只能操作“基本类型”.例外的操作符有“=”, ...
- CentOS更新Python版本,同时修复yum不能使用的问题
转自:Li_Hanx博客 遇到问题,需要更新python,网上找了好多都不能顺利更新,找到这位大佬的这篇博客,写的非常好,分享给大家. 发现一个新办法,那就是直接安装另一个版本的Python,比如Py ...
- Do waiting or suspended tasks tie up a worker thread?
https://blogs.msdn.microsoft.com/askjay/2012/07/29/do-waiting-or-suspended-tasks-tie-up-a-worker-t ...
- 控制台+Owin搭建WebAPI接口服务
当没有iis环境.想快速启动几个api接口测试又觉得新建一个api项目麻烦?来使用控制台做宿主,快速改几个api测试吧! 1.新建控制台项目 2.安装以下相关依赖 Microsoft.AspNet.W ...
- pcap报文格式
pcap报文格式 pcap报文整体格式 pcap 报文头格式 pcap报文格式,黄色部分为报文头 pcapng报文格式 PCAPNG: PCAP Next Generation Dump File F ...
- vagrant public_network 自定义静态 ip配置方法
Vagrant 创建虚拟化开发环境 Vagrant是一个基于Ruby的工具,用于创建和部署虚拟化开发环境.它 使用Oracle的开源VirtualBox虚拟化系统,使用 Chef创建自动化虚拟环境. ...