Layui简介、layui例子

Layui简介

什么是Layui？

Layui（谐音：类UI）是一套开源的WebUI解决方案，采用自身经典的模块化规范，并遵循原生HTML/CSS/JS的开发方式，说明不会像我们之前的Bootstrap里面的js依赖jQuery。Layui则是原生的不会依赖于jQuery，也不会依赖于其他的插件

注意：它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，（它是WebUI的前端框架，但是它更多的是面向后端的开发者）

Bootstrap面向的是前端的一个开发，Layui更多的是面向后端的一个开发

【详情见Layui手册】

Layui手册与Bootstrap框架大致一样，但也有许多不同的地方，具体的见Layui手册

Layui手册里面有许多的元素，则自行去手册里面看，与Bootstrap的差不多，这次讲以后的项目中大量能用到的

Layer既可以做为一个内置模块使用，也可以做为独立组件使用。如果你要是用独立组件除了引入layer.js还要引入jquer3.2.1.min.js的一个插件

Layui例子

弹出层

先新建一个项目

Layer作为layui的内置模块使用，他只需要引入layui.js和layui.css

引入插件之后，定义一个保存layer弹出层模块的变量，然后加载模块；如果你是要用layui里面的模块，都需要把这个模块进行加载，不能直接使用

加载模块里面有两个参数，一个是你要加载的模块，一个是回调函数，如果要加载多个模块，则把要加载的模块放到一个数据里面，加载一个模块则不需要放到数组里面

在把layui中的layer弹出层模块加载了，然后在输出一个弹出层即可（见图表1）

图表 1

这是一个简单的弹出层，在Layui手册里面还有其他的样式内容，比如title - 标题、content - 内容、offset - 坐标等等。（见图表2）

图表 2