Layui是一款功能强大的模块化前端UI框架工具软件，用户使用这款软件可以让你在做软件开发的时候，遵循原生HTML/CSS/JS的书写与组织形式，并且拥有更加方便的框架得以套用，该软件使用非常的便捷。
【基本简介】
Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。Layui 首个版本发布于2016年金秋，她区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
【框架特色】
- 返璞归真身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而Layui偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。
- 双面体验拥有双面的不仅是人生，还有Layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。
- 星辰大海如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是Layui不灭的执念。
【软件特性】
1、采用自身模块规范编写，遵循原生HTML/CSS/JS的书写与组织形式；
2、使用简单，门槛极低，拿来即用；
3、外在极简，却又不失饱满的内在，体积轻盈，组件丰盈；
4、从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发；
5、更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来；
6、兼容人类正在使用的全部浏览器（IE6/7除外），可作为PC端后台系统与前台界面的速成开发方案。
【使用方法】
1.在本站下载完成后解压文件：如图文件目录格式，可以直接将js和css文件引入项目中使用，
2.实例：引入layui的核心文件，
<script src=layui/layui/layui.js></script>
<link href=layui/layui/css/layui.css>
如何在hbuilder中引入layui的核心文件，zhi'xu只需要引入核心文件即可，其他的在使用过程中会自动引入，
3.页面加载完成直接运行弹出hello world。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>
<title></title>
<script src=layui/layui/layui.js></script>
<link href=layui/layui/css/layui.css>
</head>
<body>
<body>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
layer.msg('Hello World');
});
</script>
</body>
</html>
4.layui.use(['layer', 'form'], function(){
var layer = layui.layer;
layer.msg('Hello World');
});
官网首页的实例：layui.use为固定格式，[layer，form]分别为自动引入的layer.js和form.js文件，为框架自动引入
5.如果你想采用非模块化方式（即所有模块一次性加载，尽管我们并不推荐你这么做），你也可以按照下面的方式使用：
<script>
;!function(){
var layer = layui.layer
layer.msg('Hello World');
}();
</script>
6.注意<script></script>中的格式；！是不能够丢的，在最后还有（）这是layui的固定格式，也是必须有的
7.Layui在解析HTML元素时，必须充分确保其结构是被支持的。需要遵循layui的解析格式。
【使用技巧】
layui的分页怎么用？1.首先我们需要引入lay对应的脚本文件和样式文件。
2.在Html里，我们只需要创建一个空的div来生成分页组件就行了，为这个div提供一个id。
3.在js脚本代码上，我们先生成一个laypage的分页组件实例对象。
4.然后调用这个对象的render方法来渲染出分页的各个元素。
render方法里，我们传入一个对象，elem就是div的id。
count是用来指示分页的对象一共有多少条数据
5.运行这样的代码，我们就可以看到这个渲染出来的分页了，很简单的代码，就得到了一个漂亮的分页了。
6.从上面的数据我们可以看到，默认情况下是一页包含10条数据的。
当然这个我们也是可以配置的，提供limit参数就行了，我们这里设置为4.
7.重新刷新页面，可以看到，20条数据，每页4行数据，可以看到现在就共分为5页了。
8.分页控件里，一个很重要的功能是需要交互，就是说点击了某一页后，需要显示对应页的数据。
因此组件提供了一个jump的方法来交互，这个方法里，会传过来一个参数obj，这个obj我们可以得到一些常用的数据，比如obj.cur，得到的是当前的页码。
obj.limit可以得到每一页包含的数据数目。
layui怎么搭建后台框架？1.下载框架包
2.将layui文件夹拷入项目位置
3.页面中导入layui.all.js layui.css和jquery即可完成配置
【常见问题】
- 如何使用内部jQuery？由于Layui部分内置模块依赖jQuery，所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块（唯一的一个第三方模块）。只有你所使用的模块有依赖到它，它才会加载，并且如果你的页面已经script引入了jquery，它并不会重复加载。内置的jquery模块去除了全局的$和jQuery，是一个符合layui规范的标准模块。
- 为什么表单不显示？当你使用表单时，Layui会对select、checkbox、radio等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于form组件，所以你必须加载 form，并且执行一个实例。值得注意的是：导航的Hover效果、Tab选项卡等同理（它们需依赖 element 模块）
- 该如何加载模块最科学？事实上我们在模块规范已经有明确地说明，你可以采用预先加载和按需加载两种模式，但后者我们并不推荐（文档也解释原因了）。因此我们强烈推荐的方式是：你应该在你js文件的代码最外层，就把需要用到的模块 layui.use以 一下。
【更新日志】
[修复] table 组件中勾选全选后，再点击任意行复选框无法获取到值的问题
[修复] table 组件的 toolbar: true 时，在高版本 jQuery 下出现的报错问题
[修复] table 组件的固定列高在某些情况未能铺满的问题
[优化] table 组件的单元格溢出下拉框，让其不触发行点击事件
[修复] slider 组件在 max 参数设为某些数字（如 20）时，点击 input 增减按钮出现的异常问题
[优化] slider 组件局部代码，以自动纠正某些异常参数值
[修复] form 组件的 select 在空值状态下双击，导致赋值了空值提示文本的问题
去水印吧vip
群星
装修设计AI最新版
简一清单
手机同步助手
您发表的跟贴