搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin

开始使用 - 入门指南

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，其内部采用的是自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为后端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

兼容性和面向场景
layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 Web 界面速成开发方案。
获得 layui

1. 官网首页下载

你可以在我们的 官网首页 下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下： 
codelayui.code
  1.   ├─css //css目录
  2.   │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  3.   │  │  ├─laydate
  4.   │  │  └─layer
  5.   │  └─layui.css //核心样式文件
  6.   ├─font  //字体图标目录
  7.   └─layui.js //核心库
  8.

2. Git 仓库下载

你也可以通过 GitHub 或 码云 得到 layui 的完整开发包，以便于你进行二次开发，或者 Fork layui 为我们贡献方案

GitHub 码云

3. npm 下载

codelayui.code
  1.  
  2. npm i layui-src   
  3.

一般用于 WebPack 管理

快速上手

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

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

没错，不用去管其它任何文件。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面：

codelayui.code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <title>开始使用layui</title>
  7.   <link rel="stylesheet" href="../layui/css/layui.css">
  8. </head>
  9. <body>
  10.  
  11. <!-- 你的HTML代码 -->
  12.  
  13. <script src="../layui/layui.js"></script>
  14. <script>
  15. //一般直接写在一个js文件中
  16. layui.use(['layer', 'form'], function(){
  17.   var layer = layui.layer
  18.   ,form = layui.form;
  19.   
  20.   layer.msg('Hello World');
  21. });
  22. </script> 
  23. </body>
  24. </html>
  25.

如果你想采用非模块化方式（即所有模块一次性加载，尽管我们并不推荐你这么做），你也可以按照下面的方式使用：

codelayui.code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <title>非模块化方式使用layui</title>
  7.   <link rel="stylesheet" href="../layui/css/layui.css">
  8. </head>
  9. <body>
  10.  
  11. <!-- 你的HTML代码 -->
  12.  
  13. <script src="../layui/layui.all.js"></script>
  14. <script>
  15. //由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
  16. ;!function(){
  17.   var layer = layui.layer
  18.   ,form = layui.form;
  19.   
  20.   layer.msg('Hello World');
  21. }();
  22. </script> 
  23. </body>
  24. </html>
  25.
经典，因返璞归真

layui 定义为「经典模块化」，并非是自吹她自身有多优秀，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！她的所谓经典，是在于对返璞归真的执念，她以当前浏览器普通认可的方式去组织模块！我们认为，这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的最佳指引。所以 layui 本身也并不是完全遵循于AMD时代，准确地说，她试图建立自己的模式，所以你会看到：

codelayui.code
  1. //layui模块的定义
  2. layui.define([mods], function(exports){
  3.   
  4.   //……
  5.   
  6.   exports('mod', api);
  7. });  
  8.  
  9. //layui模块的使用
  10. layui.use(['mod1', 'mod2'], function(args){
  11.   var mod = layui.mod1;
  12.   
  13.   //……
  14.   
  15. });    
  16.

没错，她具备早前 AMD 的影子，又并非受限于 CommonJS 的那些条条框框，layui 认为这种轻量的组织方式，比WebPack更符合绝大多数场景。所以她坚持采用经典模块化，也正是能让人避开工具的复杂配置，回归简单，安静高效地编织原生态的 HTML / CSS / JavaScript。

但是 layui 又并非是 RequireJS 那样的模块加载器，而是一款 UI 解决方案，与 BootStrap 的不同又在于：layui 糅合了自身对经典模块化的理解。

模块化的用法（一般用于开发环境）

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

codelayui.code
  1. <script>
  2. layui.config({
  3.   base: '/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
  4. }).use('index'); //加载入口
  5. </script>    
  6.
上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下： 
codelayui.code
  1. /**
  2.   项目JS主入口
  3.   以依赖layui的layer和form模块为例
  4. **/    
  5. layui.define(['layer', 'form'], function(exports){
  6.   var layer = layui.layer
  7.   ,form = layui.form;
  8.   
  9.   layer.msg('Hello World');
  10.   
  11.   exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
  12. });    
  13.
全模块用法（一般用于线上环境）

事实上 layui 的「模块化加载」十分适用于开发环境，它方便团队开发和代码调试。但对于「线上环境」，我们更推荐您采用「全模块加载」，即直接引入 layui.all.js，它包含了 layui 所有的内置模块，且无需再通过 layui.use() 方法加载模块，直接调用即可。如：

codelayui.code
  1. <script src="../layui/layui.all.js"></script>  
  2. <script>
  3. ;!function(){
  4.   //无需再执行layui.use()方法加载模块，直接使用即可
  5.   var form = layui.form
  6.   ,layer = layui.layer;
  7.   
  8.   //…
  9. }();
  10. </script> 
  11.

除了 layui 内置的全模块加载，layui 的扩展模块同样可以合并为一个文件来加载。我们假设你的项目存放了很多个扩展模块（可以简单理解为一个 js 文件就是一个模块），那么你只需要根据其依赖关系将其合并，即可一次性加载所有扩展模块，如：

codelayui.code
  1. //mod1.js
  2. layui.define('layer', function(exports){
  3.   //…
  4.   exports(mod1, {});
  5. });
  6.  
  7. //mod2.js，假设依赖 mod1 和 form
  8. layui.define(['mod1', 'form'], function(exports){
  9.   //…
  10.   exports(mod2, {});
  11. });  
  12.  
  13. //mod3.js
  14. //… 
  15.  
  16. //main.js 主入口模块
  17. layui.define('mod2', function(exports){
  18.   //…
  19.   exports('main', {});
  20. });
  21.

现在我们可以借助 Gulp 将上述的 mod1、mod2、mod3、main 等扩展模块构建合并到一个模块文件：main，此时你只需要加载它即可：

codelayui.code
  1. <script src="../layui/layui.all.js"></script>  
  2. <script>
  3. layui.config({
  4.   base: '../js/' //你的扩展模块所在目录
  5. }).use('main'); //这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块
  6. }();
  7. </script> 
  8.

可以看到，通过「全模块」的用法，我们最多只需要加载两个 JS 文件，这将大幅度减少静态资源的请求。

通过上面的阅读，也许你已经大致了解如何使用 layui 了，但真正用于项目远不止如此，你需要继续阅读后面的文档，尤其是「基础说明」。
那么，从现在开始，尽情地拥抱 layui 吧！但愿她能成为你长远的开发伴侣，化作你方寸屏幕前的亿万字节！

layui - 用心与你沟通

© 2021 layui.com MIT license

免责声明 友链 公众号 赣ICP备13006272号-2

感谢以下平台提供云加速支持

upyun maoyun