abstrak：這節(jié)課學(xué)習(xí)了用 layui 實現(xiàn)點擊添加按鈕彈出一個信息編輯頁面的功能,主要用到 layui 的 form 組件和下拉框元素.效果:需要注意的地方:1:用某個組件或功能之前需要了解文檔,把其依賴的模塊引入到代碼中,比如 layui form需要引入<script> layui.use(
這節(jié)課學(xué)習(xí)了用 layui 實現(xiàn)點擊添加按鈕彈出一個信息編輯頁面的功能,主要用到 layui 的 form 組件和下拉框元素.
效果:
需要注意的地方:
1:用某個組件或功能之前需要了解文檔,把其依賴的模塊引入到代碼中,比如 layui form需要引入
<script>
layui.use('form', function () {
var form = layui.form;
})
</script>2:彈出層函數(shù)內(nèi)的參數(shù)課一添加和修改,例如自定義彈出層的寬高
area: ['500px', '450px']
層類型:
type: 2(共提供5種類型:layer提供了5種層類型?？蓚魅氲闹涤校?（信息框，默認(rèn)）1（頁面層）2（iframe層）3（加載層）4（tips層）。 若你采用layer.open({type: 1})方式調(diào)用，則type為必填項（信息框除外）)所以用到 layui 某個功能的時候一定確保引入了相應(yīng)的模塊以及參數(shù)的更改.
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.90so.net/layui/2.4.5/css/layui.css">
<script src="https://cdn.90so.net/layui/2.4.5/layui.js"></script>
<meta charset="UTF-8">
<title>添加角色</title>
<style>
.layui-form{
width: 400px;
margin: 40px auto;
}
</style>
</head>
<body>
<form class="layui-form" action="">
<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">
<select>
<option value="0">管理員</option>
<option value="1">輔助管理員</option>
<option value="2" selected="">用戶</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">狀態(tài)</label>
<div class="layui-input-block">
<input type="checkbox" title="正常" checked>
</div>
</div>
<button class="layui-btn layui-btn-normal" style="display: block;margin: 0px auto;width: 350px;margin-top:35px;">保存</button>
</form>
<script>
layui.use('form', function () {
var form = layui.form;
})
</script>
</body>
</html>
Guru membetulkan：韋小寶Masa pembetulan：2019-02-11 09:04:36
Rumusan guru：寫的很不錯 使用layui來實現(xiàn)表格是簡單又方便并且樣式也可以