layui框架后台布局

abstract：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>后台管理系统</title> <link rel="stylesheet" type="text

<!DOCTYPE html>

<html>

<head>

<title>后台管理系统</title>

.header {

width: 100%;

height: 50px;

background: #2e6da4;

line-height: 50px;

color: white;

}

.title {

margin-left: 20px;

font-size: 20px;

}

.userinfo {

float: right;

margin-right: 20px;

}

.userinfo a {

color: white;

margin-left: 5px;

}

.menu {

width: 200px;

/* height: 100%; */

background: #333744;

position: absolute;

/* 重要的一步 */

}

.main {

position: absolute;

left: 200px;

right: 0px;

}

.layui-collapse {

border: none;

}

.layui-colla-title {

background: #42485b;

color: white;

}

.layui-colla-content {

border: none;

padding: 0px;

}

.layui-colla-item {

border-top: none;

}

</style>

</head>

<body>

<span class="title">后台管理系统</span>

<span class="userinfo">admin [系统管理员]<span><a href="javascript:;" onclick="logout()">退出</a></span></span>

</div>

<h2 class="layui-colla-title">管理员管理</h2>

<li class="layui-nav-item layui-nav-itemed"><a href="javascript:;" onclick="menuFire(this)" src="../MI/layui_admin.html">管理员列表</a>

</li>

</ul>

</div>

</li>

</ul>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

</li>

</ul>

</div>

<h2 class="layui-colla-title">幻灯片管理</h2>

</li>

</ul>

</div>

</div>

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

var element = layui.element;

var layer = layui.layer;

$ = layui.jquery

resetMenuHeight()

//监听折叠

element.on('collapse(test)', function(data) {

layer.msg('展开状态：' + data.show);

});

function logout() {

layer.confirm('确定要退出吗？', {

icon: 3,

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

}, function(index, layero) {

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

}, function(index) {

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

});

}

//重新设置菜单容器高度

function resetMenuHeight() {

var height = document.documentElement.clientHeight - 50;

$('#menu').height(height)

}

//菜单点击

function menuFire(obj) {

//获取url

var src = $(obj).attr('src')

//改变框架内的页面地址

$('iframe').attr('src', src)

}

//重新设置菜单容器高度

function resetMainHeight(obj) {

var height = parent.document.documentElement.clientHeight - 50;

$(obj).parent('div').height(height)

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

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

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

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

</tbody>

</table>

</div>

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) {

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

});

}

//添加/编辑

function add() {

layer.open({

type: 2,

title:'添加管理员',

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

content: '../MI/layui_add.html' //这里content是一个普通的String

});

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

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

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</form>

</div>

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

layer = layui.layer;

form = layui.form;

$ = layui.jquery;

});

//子菜单跳转

function child(pid){

window.location.href="../MI/Menu/index.html?pid="+pid

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</select>

</div>

</div>

</form>

//Demo

layui.use('form', function() {

var form = layui.form;

//监听提交

// form.on('submit(formDemo)', function(data){

// layer.msg(JSON.stringify(data.field));

// return false;

// });

});

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

.header span {

background: #009688;

color: white;

margin-left: 30px;

padding: 10px;

line-height: 35px;

}

.header button {

float: right;

}

.header {

border-bottom: 2px #009688 solid;

}

.thumb {

height: 28px;

float: right;

}

</style>

</head>

<body>

</div>

</div>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>iphone</td>

<td>Apple iPhone 8 Plus 64GB 红色特别版移动联通电信4G手机<img class="thumb" src="../MI/static/img/buy/AD1.jpg"

onmouseover="show_img(this)" onmouseleave="hide_img()"> </td>

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

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

</tr>

<tr>

<td>iphone</td>

<td>Apple iPhone 8 Plus 64GB 红色特别版移动联通电信4G手机<img class="thumb" src="../MI/static/img/buy/搭配AD1.jpg"

onmouseover="show_img(this)" onmouseleave="hide_img()"> </td>

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

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

</tr>

<tr>

<td>iphone</td>

<td>Apple iPhone 8 Plus 64GB 红色特别版移动联通电信4G手机<img class="thumb" src="../MI/static/img/buy/搭配AD1.jpg"

onmouseover="show_img(this)" onmouseleave="hide_img()"></td>

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

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

</tr>

</tbody>

</table>

</div>

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

layer = layui.layer;

laypage = layui.laypage;

$ = layui.jquery;

//var layer=layui.layer;

//执行一个laypage实例

laypage.render({

elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号

count: 50 //数据总数，从服务端得到

});

// 删除

function del() {

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

icon: 2,

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

}, function(index, layero) {

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

}, function(index) {

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

});

}

//添加/编辑

function add() {

layer.open({

type: 2,

title: '添加管理员',

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

content: '../MI/Product/product_add.html' //这里content是一个普通的String

});

}

//1.首先获取到浏览器容器的位置(相对于文档)

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:solid 1px #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%;border-radius: 6px;" src="' + imgurl +

'">\

</div> '

$('body').append(html)

}

function hide_img() {

$('#preview').remove()

}

</script>

</body>

</html>

总结

使用layui可以提交效率，规范代码

Correcting teacher：天蓬老师Correction time：2019-04-04 10:50:07
Teacher's summary：前端框架的优势 , 就是在于样式统一, 功能封装, 让用户将重点放在业务逻辑上, 但也牺牲了一定的灵活性, 要有取舍, 不一定什么都交给框架,也不好

layui框架后台布局

Popular Entries