layui弹出表单的操作

原创 2019-02-11 17:02:45 765
摘要:<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Page Title</title>

<link rel="stylesheet" href="..\MI\static\layui\css\layui.css">

<script src="..\MI\static\layui\layui.js"></script>

</head>

<style>

.header span {

background: #009688;

color: #fff;

padding: 10px;

margin-left: 30px;

line-height: 32px;

}


.header button {

float: right;

}


.header {

padding-top: 10px;

border-bottom: 2px #009688 solid;

}

</style>


<body>

<div class="header">

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

<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>

</div>

<table class="layui-table">

<thead>

<tr>

<th>ID</th>

<th>用户名</th>

<th>性别</th>

<th>城市</th>

<th>签名</th>

<th>积分</th>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td>

<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td>

<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="del()">删除</a>

</td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td>

<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td>

<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td>

<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</td>

</tr>

</tbody>

</table>

<script>

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

var layer = layui.layer;

});


function del() {

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

icon: 2,

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

}, function (index, layero) {

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

}, function (index) {

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

});

}



function add(){

layer.open({

type:2,

title:'添加管理员',

area:['480px','420px'],

content:'add.html'

})

}

</script>

</body>


</html>


批改老师:韦小宝批改时间:2019-02-11 17:10:27
老师总结:layui中的弹出层的样式有很多种也很灵活 这个没事的时候可以多研究看看 还是蛮好玩的!

发布手记

热门词条