Layui介绍（1）

layui的基本使用

• layui是什么？

layui(谐音：类UI)是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，使用门槛极低，拿来即用。其外在极为简单，非常适合界面的快速开发。layui区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

• 兼容性

layui兼容人类正在使用的全部浏览器（IE6/IE7除外），可作为PC端后台系统与前台界面的速成开发方案

• 模块化用法与非模块化用法

模块化用法：

遵循layui的模块规范建立一个入口文件，并通过layui.use()方式来加载该入口文件，如下所示：

上述的index即为/Main/SelectStudentInfor目录下的index.js，它的内容如下：

非模块化用法：

如果不使用layui的模块化组织方式，可以采用“一次性加载”的方式，layui.js及所有模块单独打包合并成了一个完整的js文件，直接引入这一个文件使用即可；当采用这样的方式时，无需通过layui.use()方法加载模块，直接使用即可，如：

 

但采用该方式，意味着layui夫人模块化已经失去了它的意义。不可否认的是，该方式使用起来会更简单直接。

• 弹层组件文档-layui.layer

这里介绍一些经常使用的基础参数。

layer作为layui的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护

layer可以独立使用，也可以通过layui模块化使用。

1. 作为独立组件使用，需要在页面引入jQuery1.8以上的任意版本，并引入layer.js；
2. 作为layui模块化使用，直接在官网下载layui框架即可，无需引入jQuery和layer.js，但需要引入layui.css和layui.js

type-基本层类型

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

content-内容

content的类型有三种，分别为String类型、DOM类型、Array类型；content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。例如：

area-宽高

area的类型分为String类型与Array类型，默认值为’auto’；在默认状态下，layer宽高都是自适应的，当想定义宽高其中之一时，另一个仍然是自适应的。当宽高都要定义时，可以area:[‘500px’,’300px’]。

offset-坐标

offset的类型分为string类型和Array类型，默认为水平垂直居中。offset默认情况下不用设置。如果不想水平垂直居中，可以进行赋值：

btn-按钮

btn的类型分为String类型和Array类型，默认值为'确认'

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当只想自定义一个按钮时，可以btn: '按钮'，当你要定义两个按钮时，可以btn: ['yes', 'no']。也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：

shade-遮罩

shade的类型分别为string类型、array类型、Boolean类型，默认值为0.3。什么时遮罩/即弹层外区域。默认为0.3透明度的黑色背景（‘#000’）。如果想自定义颜色，可以设shade:[0.5,’#393D49’]；如果不想显示遮罩，可以设shade为0；

layer.confirm(content, options, yes, cancel)- 询问框

layer.confirm类似系统confirm，但却远胜confirm，另外它不是和系统的confirm一样，需要你把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。

layer.msg(content, options, end) - 提示框

layer.msg在源码中用了相对较大的篇幅来定制了这个msg，目的是想将其打造成露脸率最高的提示框。而事实上大多数人的确也在大量地使用它。因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失所有这一切都决定了大多数人对msg的爱。因此layui赋予了它许多可能在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。