layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
下载地址 : https://www.layui.com/
目录结构
├─css //css目录
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:
//引入文件
./layui/css/layui.css
./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js
引入文件后,使用模块需加载模块,这是模块化开发,非模块就不说了,官网也不建议,https://www.layui.com/doc/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
//加载css
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
//加载css
<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>
</body>
</html>
模块用法推荐你遵循 layui 的模块规范建立一个入口文件,并通过 layui.() 方式来加载该入口文件,如下所示:
<script>
layui.config({
base: '/res/js/modules/' //你存放新模块的目录,注意,不是layui的模块目录
}).use('index'); //加载入口
</script>
上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:
/**
项目JS主入口
以依赖layui的layer和form模块为例
**/
layui.define(['layer', 'form'], function(exports){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致
});
layui提供的一些全局配置
layui.config({
dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视
,version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
,base: '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
});
动态加载CSS 方法:layui.link(href)
href即为css路径。注意:该方法并非是你使用Layui所必须的,它一般只是用于动态加载你的外部CSS文件。
Layui的模块加载采用核心的 layui.use(mods, callback)方法,当你的JS 需要用到Layui模块的时候,我们更推荐你采用预先加载,因为这样可以避免到处写layui.use的麻烦。你应该在最外层如此定义:
/*
Demo1.js
使用Layui的form和upload模块
*/
layui.use(['form', 'upload'], function(){ //如果只加载一个模块,可以不填数组。如:layui.use('form')
var form = layui.form //获取form模块
,upload = layui.upload; //获取upload模块
//监听提交按钮
form.on('submit(test)', function(data){
console.log(data);
});
//实例化一个上传控件
upload({
url: '上传接口url'
,success: function(data){
console.log(data);
}
})
});
layui 的模块接口会绑定在 layui 对象下 layui.laypage //获得laypage模块
除了使用她提供的模块,还可以自定义模块
方法:layui.define([mods], callback)
通过该方法可定义一个 Layui模块。参数mods是可选的,用于声明该模块所依赖的模块。callback即为模块加载完毕的回调函数,它返回一个exports参数,用于输出该模块的接口。
//这样算是内部定义模块吧
layui.define(function(exports){
//do something
exports('demo', function(){
alert('Hello World!');
});
});
//调用模块
layui.demo();
exports是一个函数,它接受两个参数,第一个参数为模块名,第二个参数为模块接口,当你声明了上述的一个模块后,你就可以在外部使用了,demo就会注册到layui对象下,即可通过 layui.demo() 去执行该模块的接口。
第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:不用放入layui目录)
第二步:编写test.js 如下:
/**
扩展一个test模块
**/
layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'mymod'));
}
};
//输出test接口
exports('mymod', obj);
});
第三步:设定扩展模块所在的目录,然后就可以在别的JS文件中使用了
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
//你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增)
layui.extend({
mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径,即不跟随 base 路径
})
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
var mymod = layui.mymod
,mod1 = layui.mod1
,mod2 = layui.mod2;
mymod.hello('World!'); //弹出 Hello World!
});
以上是一些基础配置,和模块操作
关于模块的核心,就是 layui.js 的两个底层方法:一个用于定义模块的 layui.define(),一个加载模块的 layui.use()。
在使用时,导入js后,直接可以使用样式,如下下载body中,出现一个笑脸图标
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
有些则是需要加载模块使用的如 表单
依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能
具体内容查看官网 https://www.layui.com/doc/