layui知识
刚入公司不久,就开始做项目了,最后还是选择用layui来做前端的页面,一来是可以自适应,二来是用框架比较方便,简洁。
先看下Layui的介绍:
layui 是一款采用自身模块规范编写的情怀级前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。
获取Layui
可以在http://www.layui.com/ 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。
快速上手
获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:
./layui/css/layui.css ./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js
这两个文件是最基本的也是最重要的。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面
模块化方式
个人建议推荐使用遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用layui</title> <link rel="stylesheet" href="../layui/css/layui.css"> </head> <body> <!-- 你的HTML代码 --> <script src="../layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script> </body> </html>
非模块化方式(即所有的模块一次性全部加载)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>非模块化方式使用layui</title> <link rel="stylesheet" href="../layui/css/layui.css"> </head> <body> <!-- 你的HTML代码 --> <script src="../layui/layui.all.js"></script> <script> //由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可: ;!function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }(); </script> </body> </html>
模块化与非模块化
个人比较喜欢模块化,因为模块化是你需要的时候就加载,假如是非模块化的话,一开始就全部加载了所有的js文件,但实际上,有些页面用到的模块可能很少,并不需要加载那么大的js文件,所以还是推荐使用模块化的方式,非模块化的方式虽然方便,但对用户来说是不太好的。
模块规范
layui的模块是基于layui.js内部实现的异步模块加载方式,并不遵循AMD,而是自己定义了一套更轻量的模块规模。并且这种方式在经过了大量的实战后,成为layui最核心的模块加载引擎。
预先加载
Layui的模块加载采用核心的layui.use(mods,callback)方法,当你JS需要用到layui模块的时候,我们推荐使用采用预先加载,因为这样可以避免到处写layui.use,这样很麻烦,应该在最外层定义:
/* Demo1.js 使用Layui的form和upload模块 */ layui.use(['form', 'upload'], function(){ //如果只加载一个模块,可以不填数组。如:layui.use('form') var form = layui.form //获取form模块 ,upload = layui.upload; //获取upload模块 //监听提交按钮 form.on('submit(test)', function(data){ console.log(data); }); //实例化一个上传控件 upload({ url: '上传接口url' ,success: function(data){ console.log(data); } }) });
按需加载(此方法不推荐使用)
如果你是一位有强迫症的人,你对网站的性能有极致的要求,你并不想预先加载所需的模块,而是触发一个指令或动作的时候,才气加载模块,那么,这是可以的。你不用在你的JS最外层区包裹这一个那么大的layui.use,你只需要:
button.addEvent('click',function(){ layui.use('laytp1',function(laytp1){//注意:多次调用use并不会重复加载laytpl.js,Layui内部有做模块cache处理。 var html=laytp1('').render({}); console.log(html); }) })
注意:如果你的JS中需要大量用到模块,个人建议不推荐您采用这种加载方式,因为这意味着你要写很多layui.use(),代码可维护性不高。
建议还是采用:预先加载。即一个JS文件中,写一个use即可。
扩展一个Layui的三个步骤:
第一步:确认模块名,假设为:test.js文件放入项目任意目录下(注意:不用放入layui目录)
第二步:编写test.js如下:
layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('layer', callback); var obj = { hello: function(str){ alert('Hello '+ (str||'test')); } }; //输出test接口 exports('test', obj); });
第三步:设定扩展模块所在的目录,然后就可以在别的JS文件中使用
layui.config({ base: '/res/js/' //假设这是test.js所在的目录 }).extend({ //设定模块别名 test: 'test' //如果test.js是在根目录,也可以不用设定别名 ,test1: 'admin/test1' //相对于上述base目录的子目录 }); //使用test layui.use('test', function(){ var test = layui.test; test.hello('World!'); //弹出Hello World! }); //使用test1 layui.use('test1', function(){ var test = layui.test1; //…… });
全局配置
方法:layui.config(options)
layui.config({ base: 'js/' //你存放新模块的目录,注意,不是layui的模块目录 }).use('index'); //加载入口
layui弹出层
layer至今仍作为layui的代表作,它的爱众广泛并非偶然,而是这数年来的坚持、不弃的执念,讲那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在web开发者的圈子里口口相传,乃至于成为今天的layui最强劲的源动力。目前,Layui已成为国内最多人使用的Web弹层组件,GitHub自然Start 5000+,官网累计下载量达50W+,大概有30万不同规模的Web平台使用过layer。
之所以列举上面这些数字,并非是在夸夸其谈,而是懂layer的人都知道,这是一种怎样不易的沉淀。而由于layer在layui体系中的位置比较特殊,甚至让很多人都是误以为layui=layer ui,所以再次强调layer只是作为layui的一个弹层模块,由于其用户基量数较大,所以至今把它作为独立组件来维护,不过要注意的是:无论是独立的layer,还是作为内置模块的layer,文档都以本页为准。
模块加载名称:layer,独立版本:http://layer.layui.com/
使用场景
由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照您的实际需求来选择。
![](https://img2018.cnblogs.com/blog/1454089/201906/1454089-20190626094219922-2094182530.png)
作为独立组件使用layer
<script src="layer.js"></script> <script> layer.msg('hello'); </script>
在layui中使用layer
layui.use('layer', function(){ var layer = layui.layer; layer.msg('hello'); });
除了上面有所不同,其它都完全一致。
基础参数
我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content:"}) layer.msg(",{time:3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要所有都要去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。需要注意的是:从2.3开始,无需通过layer.config来加载拓展模块。
type-基本层类型
类型:Number,默认:0
layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe)3(加载层)4(tips层)。若你caiyonglayer.open({type:1})方式调用,则type为必填项(信息框除外)
title - 标题
类型:Number,默认:0
layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
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 });
skin - 样式类名
类型:String,默认:''
skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lanlayui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子
//单个使用 layer.open({ skin: 'demo-class' }); //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高 layer.config({ skin: 'demo-class' }) //CSS body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;} body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7} body .demo-class .layui-layer-btn a{background:#333;} body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;} … 加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。
area - 宽高
类型:String/Array,默认:'auto'
在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']
offset - 坐标
类型:String/Array,默认:垂直水平居中
offset默认情况下不用设置。但如果你不想垂直水平居中,你还可以进行以下赋值:
icon - 图标。信息框和加载层的私有参数
//eg1 layer.alert('酷毙了', {icon: 1}); //eg2 layer.msg('不开心。。', {icon: 5}); //eg3 layer.load(1); //风格1的加载
btn - 按钮
类型:String/Array,默认:'确认'
信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。如:
//eg1 layer.confirm('纳尼?', { btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮 ,btn3: function(index, layero){ //按钮【按钮三】的回调 } }, function(index, layero){ //按钮【按钮一】的回调 }, function(index){ //按钮【按钮二】的回调 }); //eg2 layer.open({ content: 'test' ,btn: ['按钮一', '按钮二', '按钮三'] ,yes: function(index, layero){ //按钮【按钮一】的回调 } ,btn2: function(index, layero){ //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,btn3: function(index, layero){ //按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,cancel: function(){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } });
btnAlign - 按钮排列
类型:String,默认:r
你可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。该参数可支持的赋值如下:
closeBtn - 关闭按钮
类型:String/Boolean,默认:1
layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0
shade - 遮罩
类型:String/Array/Boolean,默认:0.3
即弹层外区域。默认是0.3透明度的黑色背景('#000')。如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0
shadeClose - 是否点击遮罩关闭
类型:Boolean,默认:false
如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。
time - 自动关闭所需毫秒
类型:Number,默认:0
默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)
id - 用于控制弹层唯一标识
类型:String,默认:空字符
设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式
anim - 弹出动画
类型:Number,默认:0
我们的出场动画全部采用CSS3。这意味着除了ie6-9,其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。另外需要注意的是,3.0之前的版本用的是 shift 参数
isOutAnim - 关闭动画 (layer 3.0.3新增)
类型:Boolean,默认:true
默认情况下,关闭层时会有一个过度动画。如果你不想开启,设置 isOutAnim: false 即可
maxmin - 最大最小化
类型:Boolean,默认:false
该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
fixed - 固定
类型:Boolean,默认:true
即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
resize - 是否允许拉伸
类型:Boolean,默认:true
默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效
resizing - 监听窗口拉伸动作
类型:Function,默认:null
当你拖拽弹层右下角对窗体进行尺寸调整时,如果你设定了该回调,则会执行。回调返回一个参数:当前层的DOM对象
resizing: function(layero){ console.log(layero); }
scrollbar - 是否允许浏览器出现滚动条
类型:Boolean,默认:true
默认允许浏览器滚动,如果设定scrollbar: false,则屏蔽
maxWidth - 最大宽度
类型:Number,默认:360
请注意:只有当area: 'auto'时,maxWidth的设定才有效。
maxHeight - 最大高度
类型:Number,默认:无
请注意:只有当高度自适应时,maxHeight的设定才有效
zIndex - 层叠顺序
类型:,默认:19891014(贤心生日 0.0)
一般用于解决和其它组件的层叠冲突。