layui知识

时间 2019-11-20

标签 layui 知识繁體版

原文原文链接

　　刚入公司不久，就开始作项目了，最后仍是选择用layui来作前端的页面，一来是能够自适应，二来是用框架比较方便，简洁。css

先看下Layui的介绍：

layui 是一款采用自身模块规范编写的情怀级前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都通过精心雕琢，很是适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于MVVM底层的UI框架，却并不是逆道而行，而是信奉返璞归真之道。准确地说，她更可能是为服务端程序员量身定作，你无需涉足各类前端工具的复杂配置，只需面对浏览器自己，让一切你所须要的元素与交互，从这里信手拈来。layui 兼容人类正在使用的所有浏览器（IE6/7除外），可做为PC端后台系统与前台界面的速成开发方案。html

获取Layui

能够在http://www.layui.com/ 下载到 layui 的最新版，它通过了自动化构建，更适合用于生产环境。前端

快速上手

得到 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只须要引入下述两个文件：程序员

./layui/css/layui.css
./layui/layui.js //提示：若是是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

这两个文件是最基本的也是最重要的。由于他们（好比各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面web

模块化方式

我的建议推荐使用遵循 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>

非模块化方式（即全部的模块一次性所有加载）

若是你并不喜欢 layui 的模块化组织方式，你彻底能够毅然采用“一次性加载”的方式，咱们将 layui.js 及全部模块单独打包合并成了一个完整的js文件，用的时候直接引入这一个文件便可。当你采用这样的方式时，你无需再经过 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.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模块化使用。因此请按照您的实际需求来选择。

做为独立组件使用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）

通常用于解决和其它组件的层叠冲突。

1. layui 知识点
2. 【知识积累】Thymeleaf + layui
3. LayUI 前端框架基础知识
4. layui初识
5. 认识Layui
6. vue layui vue-router 的一些知识点，你会多少
7. layui
8. layUI
9. LayUI
10. 知识
更多相关文章...
• 与传输层有关的基本知识 - TCP/IP教程
• Spring通知类型及使用ProxyFactoryBean创建AOP代理 - Spring教程
• Git可视化极简易教程 — Git GUI使用方法
• 三篇文章了解 TiDB 技术内幕 —— 谈调度

layui知识

先看下Layui的介绍：

获取Layui

快速上手

模块化方式

非模块化方式（即全部的模块一次性所有加载）

模块化与非模块化

模块规范

预先加载

按需加载(此方法不推荐使用)

注意:若是你的JS中须要大量用到模块，我的建议不推荐您采用这种加载方式，由于这意味着你要写不少layui.use(),代码可维护性不高。

建议仍是采用:预先加载。即一个JS文件中，写一个use便可。

扩展一个Layui的三个步骤：

全局配置

layui弹出层

使用场景

基础参数

type-基本层类型

title - 标题

content - 内容

skin - 样式类名

area - 宽高

offset - 坐标

icon - 图标。信息框和加载层的私有参数

btn - 按钮

btnAlign - 按钮排列

closeBtn - 关闭按钮

shade - 遮罩

shadeClose - 是否点击遮罩关闭

time - 自动关闭所需毫秒

id - 用于控制弹层惟一标识

anim - 弹出动画

isOutAnim - 关闭动画 （layer 3.0.3新增）

maxmin - 最大最小化

fixed - 固定

resize - 是否容许拉伸

resizing - 监听窗口拉伸动做

scrollbar - 是否容许浏览器出现滚动条

maxWidth - 最大宽度

maxHeight - 最大高度

zIndex - 层叠顺序

isOutAnim - 关闭动画（layer 3.0.3新增）