摘要：<!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: 5px; */
/* border-top: 2px #009688 solid; */
}
.thumb{
height: 28px;
float: right;
border: 1px solid #f0f0f0;
padding: 1px;
}
</style>
<body style="padding:10px;">
<div class="header">
<span>商品列表</span>
<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入商品名称" autocomplete="off"
class="layui-input">
</div>
<button class="layui-btn layui-btn-primary" style="display:inline-block;"><i class="layui-icon"></i>搜索</button>
</div>
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>分类</th>
<th>名称</th>
<th>最低价格</th>
<th>成本</th>
<th>pv</th>
<th>状态</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img class="thumb" src="tupian/03b25e8b76a9d76ec1f5507b6ce4d7a5.jpg"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img class="thumb" src="tupian/03b25e8b76a9d76ec1f5507b6ce4d7a5.jpg"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img class="thumb" src="tupian/03b25e8b76a9d76ec1f5507b6ce4d7a5.jpg"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="test1"></div>
<script>
layui.use(['layer'], function () {
layer = layui.layer;
$ = layui.jquery;
});
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'
})
}
layui.use('laypage', function () {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
limit: 2,
count: 5 //数据总数，从服务端得到
});
});
//获取浏览器窗口的位置
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
return {
'x': x,
'y': y
};
}
function show_img(obj){
var imgurl = $(obj).attr('src');
var res = getMousePos();
var html = '<div style="background:#fff;width:200px;border:1px solid #ccc;border-radius:6px;padding:2px;position:absolute;left:'+res.x+
'px;top:'+res.y+'px;z-index:4;" id="preview">\<img style="width:100%;" src="'+imgurl+'">\</div>'//改写法若想实现标签嵌套需要使用'\\'
$('body').append(html);
}
function hide_img(obj){
$('#preview').remove();
}
</script>
</body>
</html>
layui的使用很便捷，但弹出窗口的内容还是有点不熟练
批改老师：韦小宝批改时间：2019-02-15 17:36:31
老师总结：写的很不错 layui使用起来是很方便 layui中的弹出层有很多种样式哦 而且使用起来还很灵活 没事的时候可以去研究研究
