摘要：layui是前端布局框架，可以使前端開發(fā)人員快速的把頁面拉起來；使用步驟: 1、在layui官網下載組件css,js2、引入layui.css 樣式文件,layui.js js文件；3、頁面布局中使用的是layui 的內部對應的樣式class 就可以完成標簽的配置；4、使用layui.js時需要先引入layui.js 然后加載對應的模塊；layui.use(['lay
layui是前端布局框架，可以使前端開發(fā)人員快速的把頁面拉起來；
使用步驟:
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">狀態(tài)</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>
批改老師：查無此人批改時間：2019-06-10 10:13:46
老師總結：完成的不錯。layui封裝了很多js，多看文檔。繼續(xù)加油。