layui基础总结
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
2.layui弹层
我们也可以通过访问Layer来获取，获取到layer组件后导入项目中。具体步骤结构参考下图：
1.在页面中引入jQuery框架
2.将下载的layer文件夹完整复制到项目中
3.引入layer目录下的layer.js文件
4.开启layer弹层之旅
这里写图片描述
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
<title>layer弹层之美</title>
<script type=”text/javascript” src=”js/jquery-3.2.1.min.js” ></script>
<script type=”text/javascript” src=”layer/layer.js” ></script>
</head>
<script type=”text/javascript”>
$(function(){
$(“#btn”).click(function(){
//询问框
layer.confirm(\’您是如何看待前端开发？\’, {
btn: [\’重要\’,\’奇葩\’] //按钮
}, function(){
layer.msg(\’的确很重要\’, {icon: 1});
}, function(){
layer.msg(\’也可以这样\’, {
time: 20000, //20s后自动关闭
btn: [\’明白了\’, \’知道了\’]
});
});
})
})
</script>
<body>
<input type=”button” value=”提交” id=”btn”/>
</body>
</html>
layer.alert(\’内容\’)
//第三方扩展皮肤
layer.alert(\’内容\’, {
icon: 1,
skin: \’layer-ext-moon\’ //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
})
//询问框
layer.confirm(\’您是如何看待前端开发？\’, {
btn: [\’重要\’,\’奇葩\’] //按钮
}, function(){
layer.msg(\’的确很重要\’, {icon: 1});
}, function(){
layer.msg(\’也可以这样\’, {
time: 20000, //20s后自动关闭
btn: [\’明白了\’, \’知道了\’]
});
});
//提示层
layer.msg(\’玩命提示中\’);
//墨绿深蓝风
layer.alert(\’墨绿风格，点击确认看深蓝\’, {
skin: \’layui-layer-molv\’ //样式类名
,closeBtn: 0
}, function(){
layer.alert(\’偶吧深蓝style\’, {
skin: \’layui-layer-lan\’
,closeBtn: 0
,anim: 4 //动画类型
});
});
//捕获页
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $(\’.layer_notice\’), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg(\’捕获就是从页面已经存在的元素上，包裹layer的结构\’, {time: 5000, icon:6});
}
});
//页面层
layer.open({
type: 1,
skin: \’layui-layer-rim\’, //加上边框
area: [\’420px\’, \’240px\’], //宽高
content: \’html内容\’
});
//自定页
layer.open({
type: 1,
skin: \’layui-layer-demo\’, //样式类名
closeBtn: 0, //不显示关闭按钮
anim: 2,
shadeClose: true, //开启遮罩关闭
content: \’内容\’
});
//tips层
layer.tips(\’Hi，我是tips\’, \’吸附元素选择器，如#id\’);
//iframe层
layer.open({
type: 2,
title: \’layer mobile页\’,
shadeClose: true,
shade: 0.8,
area: [\’380px\’, \’90%\’],
content: \’mobile/\’ //iframe的url
});
//iframe窗
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: [\’340px\’, \’215px\’],
offset: \’rb\’, //右下角弹出
time: 2000, //2秒后自动关闭
anim: 2,
content: [\’test/guodu.html\’, \’no\’], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: \’很多时候，我们想最大化看，比如像这个页面。\’,
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: [\’893px\’, \’600px\’],
content: \’//fly.layui.com/\’
});
}
});
//加载层
var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
//loading层
var index = layer.load(1, {
shade: [0.1,\’#fff\’] //0.1透明度的白色背景
});
//小tips
layer.tips(\’我是另外一个tips，只不过我长得跟之前那位稍有些不一样。\’, \’吸附元素选择器\’, {
tips: [1, \’#3595CC\’],
time: 4000
});
//prompt层
layer.prompt({title: \’输入任何口令，并确认\’, formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: \’随便写点啥，并确认\’, formType: 2}, function(text, index){
layer.close(index);
layer.msg(\’演示完毕！您的口令：\’+ pass +\'<br>您最后写下了：\’+text);
});
});
//tab层
layer.tab({
area: [\’600px\’, \’300px\’],
tab: [{
title: \’TAB1\’,
content: \’内容1\’
}, {
title: \’TAB2\’,
content: \’内容2\’
}, {
title: \’TAB3\’,
content: \’内容3\’
}]
});
//相册层
$.getJSON(\’test/photos.json?v=\’+new Date, function(json){
layer.photos({
photos: json //格式见API文档手册页
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
});
});
3.layui常用按钮
Layui的按钮有多种样式可供选择，但是无论使用哪种样式的按钮时，都必须在该html标签中加上一个名为layui-btn的class名。其次再添加你需要使用的按钮样式所对应的的class名。
各按钮样式class名，按照主题可分为：
原始（layui-btn-primary）background-color：#009688;
默认（layui-btn）background-color：#009688;
百搭（layui-btn-normal）background-color：#1E9FFF;
暖色（layui-btn-warm）background-color：#F7B824;
警告（layui-btn-danger）background-color：#FF5722;
禁用（layui-btn-disabled）background-color：#FBFBFB;
按钮的默认样式（layui-btn）在layui.css中的第370行至384行：
.layui-btn {
display: inline-block;
height: 38px;
line-height: 38px;
padding: 0 18px;
background-color: #009688;
color: #fff;
white-space: nowrap;
text-align: center;
border: none;
border-radius: 2px;
cursor: pointer;
opacity: .9;
filter: alpha(opacity=90)
}
圆角（layui-btn-radius）
大按钮（layui-btn-big）
小按钮（layui-btn-small）
迷你按钮（layui-btn-mini）
4.表单元素
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>layui.form小例子</title>
<link rel=”stylesheet” href=”layui/css/layui.css” media=”all”>
</head>
<body>
<form class=”layui-form”> <!– 提示：如果你不想用form，你可以换成div等任何一个普通元素 –>
<div class=”layui-form-item”>
<label class=”layui-form-label”>输入框</label>
<div class=”layui-input-block”>
<input type=”text” name=”” placeholder=”请输入” autocomplete=”off” class=”layui-input”>
</div>
</div>
<div class=”layui-form-item”>
<label class=”layui-form-label”>下拉选择框</label>
<div class=”layui-input-block”>
<select name=”interest” lay-filter=”aihao”>
<option value=”0″>写作</option>
<option value=”1″>阅读</option>
</select>
</div>
</div>
<div class=”layui-form-item”>
<label class=”layui-form-label”>复选框</label>
<div class=”layui-input-block”>
<input type=”checkbox” name=”like[write]” title=”写作”>
<input type=”checkbox” name=”like[read]” title=”阅读”>
</div>
</div>
<div class=”layui-form-item”>
<label class=”layui-form-label”>开关关</label>
<div class=”layui-input-block”>
<input type=”checkbox” lay-skin=”switch”>
</div>
</div>
<div class=”layui-form-item”>
<label class=”layui-form-label”>开关开</label>
<div class=”layui-input-block”>
<input type=”checkbox” checked lay-skin=”switch”>
</div>
</div>
<div class=”layui-form-item”>
<label class=”layui-form-label”>单选框</label>
<div class=”layui-input-block”>
<input type=”radio” name=”sex” value=”0″ title=”男”>
<input type=”radio” name=”sex” value=”1″ title=”女” checked>
</div>
</div>
<div class=”layui-form-item layui-form-text”>
<label class=”layui-form-label”>请填写描述</label>
<div class=”layui-input-block”>
<textarea placeholder=”请输入内容” class=”layui-textarea”></textarea>
</div>
</div>
<div class=”layui-form-item”>
<div class=”layui-input-block”>
<button class=”layui-btn” lay-submit lay-filter=”*”>立即提交</button>
<button type=”reset” class=”layui-btn layui-btn-primary”>重置</button>
</div>
</div>
<!– 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 –>
</form>
<script src=”layui/layui.js”></script>
<script>
layui.use(\’form\’, function(){
var form = layui.form;
//各种基于事件的操作，下面会有进一步介绍
});
</script>
注：如果需要用 js动态追加一些layui表单元素，必须加如下代码，执行到这一步才会将部分表单元素修饰成功，否则无
layui.use(\’form\’, function(){
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
form.render();
});
5.预设元素属性
6.事件监听
form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：
event 描述
select 监听select下拉选择事件
checkbox 监听checkbox复选框勾选事件
switch 监听checkbox复选框开关事件
radio 监听radio单选框事件
submit 监听表单提交事件
默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。
form.on(\’select(test)\’, function(data){
console.log(data);
});
监听radio
form.on(\’radio(agreeRadioA)\’, function(data){
//选择不同意
if(data.value == \’step11\’){
$(“#approve_divA”).slideDown();
$(“#agreeContentA”).val(“”);
}else{
$(“#approve_divA”).slideUp();
}
});