LayUI 是阿里大神贤心的核心技术作品 采用经典模块化,也正是能让人避开工具的复杂配置,回归到简单而原生态的HTML/CSS/JavaScript layerlayer 至今仍作为 layui 的代表作 sea.js 在 SeaJS 的世界里,一个文件就是一个模块。所有模块都遵循 CMD 规范,我们可以像在 Node 环境中一样来书写模块代码
快速上手
获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:
./layui/css/layui.css ./layui/layui.js <!--如果是采用非模块化方式可换成:./layui/layui.all.js-->
模块化方式
<!-- 你的HTML代码 --> <script src="../layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script>
非模块化方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>非模块化方式使用layui</title><link rel="stylesheet" href="../layui/css/layui.css"></head> <body> <!-- 你的HTML代码 --> <script src="../layui/layui.all.js"></script><script> //由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可: ;!function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }(); </script> </body> </html>
- 引入自定义插件
layui.config({ base: '../../static/common/yutons-mods/' //根据实际路径设置自定义插件路径 }).use(['yutons_sug'], function() {}); layui.config({ base: './module/' }).extend({ iconPicker: 'iconPicker/iconPicker' //实际路径 ./module/iconPicker/iconPicker.js });
- 渲染更新
form.render(); //更新全部 //或者 form.render('select'); //刷新select选择框渲染 form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态 //注意一下 layui版本 layui.form().render(); //这是1.0的写法 layui.form.render(); //这是2.0更新后的写法