layui使用总结
layui是前端布局框架，可以使前端开发人员快速的把页面拉起来；
使用步骤:
1、在layui官网下载组件css,js
2、引入layui.css 样式文件,layui.js js文件；
3、页面布局中使用的是layui 的内部对应的样式class 就可以完成标签的配置；
4、使用layui.js时需要先引入layui.js 然后加载对应的模块；
layui.use(['laypage','upload'],function(){
var laypage = layui.laypage;
var upload = layui.upload;
$ = layui.jquery;
})
<!DOCTYPE html>
<html>
<head>
<title>商品添加</title>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
<style type="text/css">
.header span{background: #009688;color: white;padding: 10px;margin-left: 30px;line-height: 33px;}
.header button{float: right;}
.header{border-bottom: 2px solid #009688;}
.thumb{height: 28px;float: right;border: 1px solid #f0f0f0;padding: 1px;}
</style>
</head>
<body style="padding: 10px;">
<div class="header">
<span>商品添加</span>
<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<form class="layui-form" style="padding: 10px;">
<div class="layui-form-item">
<label class="layui-form-label">商品类目</label>
<div class="layui-input-inline">
<select name="cate">
<option value="0">请选择</option>
<option value="1">手机</option>
<option value="2">电脑</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品名称</label>
<div class="layui-input-inline">
<input type="text" name="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">价格</label>
<div class="layui-input-inline">
<input type="text" name="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图片上传</label>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-sm" id="uploads">
<i class="layui-icon"></i>图片上传
</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">描述</label>
<div class="layui-input-inline">
<textarea rows="6" cols="25">
我是一个文本框。
</textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<input type="checkbox" name="like" title="禁用">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn-xm layui-btn">添 加</button>
</div>
</div>
</form>
<script type="text/javascript">
//折叠
layui.use(['layer','form','laypage','upload'],function(){
var layer = layui.layer;
var form = layui.form;
laypage = layui.laypage;
$ = layui.jquery;
var upload = layui.upload;
upload.render({
elem:'#uploads',
url:'/upload/',
done:function(res){},
error:function(){}
});
});
</script>
</html>
