layui框架

Original 2019-03-25 17:08:22 335
abstract:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="static/lay

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<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;

margin-left: 30px;

padding: 10px;

line-height: 35px;

}


.header button {

float: right;

}


.header {

border-bottom: 2px #009688 solid;

}

</style>

</head>

<body>

<div class="header">

<span>管理员列表</span>

<button class="layui-btn layui-btn-sm">添加</button>

</div>

<div class="table">

<table class="layui-table">

<thead>

<tr>


<th>姓名</th>

<th>民族</th>

<th>性别</th>

<th>代表作品</th>

<th>祖籍</th>

<th></th>

<th></th>


</tr>

</thead>

<tbody>

<tr>

<td>李小龙</td>

<td>汉族</td>

<td>1989-10-14</td>

<td>人生似修行</td>

<td>汉族</td>

<td><button class="layui-btn"><i class="layui-icon">编辑</i></button></td>

<td> <button class="layui-btn layui-btn-danger" onclick="del()"><i class="layui-icon">删除</i></button></td>

</tr>

<tr>

<td>李连杰</td>

<td>汉族</td>

<td>1920-09-30</td>

<td>于千万人之中</td>

<td>汉族</td>

<td><button class="layui-btn"><i class="layui-icon">编辑</i></button></td>

<td> <button class="layui-btn layui-btn-danger" onclick="del()"><i class="layui-icon" >删除</i></button></td>

</tr>

<tr>

<td>成龙</td>

<td>拉丁美裔</td>

<td>1880-06-27</td>

<td> Life is either a daring adventure or nothing.</td>

<td>汉族</td>

<td><button class="layui-btn"><i class="layui-icon">编辑</i></button></td>

<td> <button class="layui-btn layui-btn-danger" onclick="del()"><i class="layui-icon" >删除</i></button></td>

</tr>



</tbody>

</table>



</div>


           

<script type="text/javascript">


layui.use(['layer'],function(){

layer = layui.layer;

$ = layui.jquery;

//var layer=layui.layer;

});


// 删除

function del(){

layer.confirm('确定要删除么?', {

  icon:2,

  btn: ['确定', '取消'] //可以无限个按钮

}, function(index, layero){

  //按钮【按钮一】的回调

}, function(index){

  //按钮【按钮二】的回调

});

}

</script>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-03-26 09:54:42
Teacher's summary:完成的不错。layui框架,可以快速搭建页面,省时间去做其他功能。

Release Notes

Popular Entries