前端框架layui

layui是优秀的前端框架之一，具有使用门槛低，适用范围广的特点，能够帮助用户进行前端界面的快速开发，不需要复杂的配置，操作简单、高效完成工作。

layui框架介绍

开源的Web UI解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

怎么用

1.创建一个工程，把Layui相关的文件复制到工程里面

2.在官网复制后台管理的示例代码，并改css和js的引入路径，同时引入jQuery.js文件

3.根据个人的需求，对后台管理页面进行修改

layui框架优缺点

优点：

作为国产开源的前端UI，简单易上手，并且UI简洁美观。本身目标对象是不怎么懂前端的后端开发人员，也适合后端人员使用。

（1）属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。

（2）提供给后端开发人员最好的ui框架，基于DOM驱动，只要不涉及到交互layui还是很不错的

缺点：

由于是个人开源的项目并且开源时间不长，因此bug会比较多，也会有一些限制。兼容性也不强，尤其是在移动端。不由于设计的初衷，LayUi只适合小型项目，即便是小项目，也经常会遇到诸多问题。官网对集成较好的技术收费。

常见问题

- 为什么表单不显示？

当你使用表单时，Layui会对select、checkbox、radio等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于form组件，所以你必须加载 form，并且执行一个实例。值得注意的是：导航的Hover效果、Tab选项卡等同理（它们需依赖 element 模块）

- 如何使用内部jQuery？

由于Layui部分内置模块依赖jQuery，所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块（唯一的一个第三方模块）。只有你所使用的模块有依赖到它，它才会加载，并且如果你的页面已经script引入了jquery，它并不会重复加载。内置的jquery模块去除了全局的$和jQuery，是一个符合layui规范的标准模块。

- 该如何加载模块最科学？

事实上我们在模块规范已经有明确地说明，你可以采用预先加载和按需加载两种模式，但后者我们并不推荐（文档也解释原因了）。因此我们强烈推荐的方式是：你应该在你js文件的代码最外层，就把需要用到的模块 layui.use以 一下。

更新内容

v2.6.8

[加强] table 组件的自定义模板功能，返回 LAY_COL 字段，可得到当前列的表头配置信息

[加强] form 组件对验证不通过的表单项自动定位到可视区域，不再是只对输入框自动获焦定位

[重写] sort 方法，以便对数字、非数字及混合类等所有内容的排序进行支持

[新增] dropdown 组件的 align 参数，用于控制下拉菜单水平对齐方式（支持 left、center、right），默认 left

[新增] table 组件的 escape 参数，用于是否开启 xss 字符过滤（默认 false）

[加强] form 组件对 url 的验证

[加强] colorpicker 组件的坐标定位计算方式

[修复] 低版本 ie 若干报错问题

[修复] form 相关 css 的 layui-checkbox-disabled 书写错误（之前为 disbaled） #I1NGDC

[修复] form 组件的 select option 内容出现换行时的样式异常问题 #I3T5ZC

[修复] colorpicker 颜色选择组件在 Firefox 下选择颜色时的若干兼容问题 #I3POP2

v2.6.7

[重写] layui.each() 基础方法，以兼容各种对象遍历

[新增] layui._typeof(operand) / layui._isArray(obj) 两个基础方法，分别为"获取详细数据类型"、"对象是否为泛数组"

[修复] layui.sort(obj) 基础方法，在比较某些值相等时出现排序异常的问题

[修复] form 组件当 layui-form 元素出现层级嵌套，其提交的表单未按当前层级的问题

[修复] table 组件当数据存在 length 字段并为 0 时，未被显示的问题

[修复] laydate 组件范围选择的若干问题

[修复] layer.photos 层在 iframe 页面中通过 parent 无法弹出的历史弥久问题

[优化] element nav 鼠标移至滑动块致其闪动的问题

[优化] 若干样式细节

[优化] upload 组件 before 回调，若 return false，则表明阻止上传