1、下载地址:https://res.layui.com/static/download/layui/layui-v2.5.5.zip?v= 2、结构: -css: -modules -laydate -layer -layim -layui.css -font -images -lay -modules -layui.js -layui.all.js 3、页面引入: ./layui/css/layui.css ./layui/layui.js <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> ........... <script src="../layui/layui.js"></script> 4、全局配置:layui.config layui.config({ dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视 ,version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610 ,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面 ,base: '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展 }); 5、定义模块: layui.define(function(exports){ //do something
exports('demo', function(){ alert('Hello World!'); }); }); 定义有依赖的模块 layui.define(['layer', 'laypage'], function(exports){ //do something
exports('demo', function(){ alert('Hello World!'); }); }); 6、加载所需模块:layui.use layui.use(['laypage', 'layedit'], function(){ var laypage = layui.laypage ,layedit = layui.layedit;
//do something }); 7、数据存储:layui.data ,layui.sessionData localStorage 持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。 sessionStorage 会话性存储:layui.sessionData(table, settings),页面关闭后即失效。注:layui 2.2.5 新增 //【增】:向test表插入一个nickname字段,如果该表不存在,则自动建立。 layui.data('test', { key: 'nickname' ,value: '贤心' });
//【删】:删除test表的nickname字段 layui.data('test', { key: 'nickname' ,remove: true }); layui.data('test', null); //删除test表
//【改】:同【增】,会覆盖已经存储的数据
//【查】:向test表读取全部的数据 var localTest = layui.data('test'); console.log(localTest.nickname); //获得“贤心” 8、获取设备信息: var device = layui.device(); 9、其他方法