root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

常用页面完善页面骨架

v1.0
bobi 2018-07-25 23:06:06 +08:00
parent f69d79e8d8
commit 190dab9ffd
6 changed files with 241 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
403.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>403</title>
</head>
<body>
<h1>403页面，待开发...</h1>
</body>
</html>

10
404.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
</head>
<body>
<h1>404页面，待开发...</h1>
</body>
</html>

10
500.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>500</title>
</head>
<body>
<h1>500页面，待开发...</h1>
</body>
</html>

182
article.html Normal file
View File

@ -0,0 +1,182 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文章列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="css/scroll-bar.css">
<link rel="stylesheet" href="css/sub-page.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_wytlyqhtdtj1nhfr.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css">
</head>
<body>
<div class="ok-body">
<!--面包屑导航区域-->
<div class="ok-body-breadcrumb">
<span class="layui-breadcrumb">
<a><cite>首页</cite></a>
<a><cite>常用页面</cite></a>
<a><cite>文章列表</cite></a>
</span>
<a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
<!--模糊搜索区域-->
<div class="layui-row">
<form class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
<input class="layui-input" placeholder="请输入用户名" autocomplete="off">
<button class="layui-btn" lay-submit="" lay-filter="search">
<i class="layui-icon layui-icon-search"></i>
</button>
</form>
</div>
<!--工具栏-->
<okToolbar>
<button class="layui-btn layui-btn-normal" id="batchEnabled">
<i class="iconfont icon-shangsheng"></i>批量启用
</button>
<button class="layui-btn layui-btn-warm" id="batchDisabled">
<i class="iconfont icon-web-icon-"></i>批量停用
</button>
<button class="layui-btn layui-btn-danger" id="batchDel">
<i class="layui-icon layui-icon-delete"></i>批量删除
</button>
<button class="layui-btn" id="addUser">
<i class="layui-icon">&#xe61f;</i>添加用户
</button>
<span>共有数据：<i id="countNum"></i> 条</span>
</okToolbar>
<!--数据表格-->
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js"></script>
<script>
NProgress.start();
window.onload = function() {
NProgress.done();
}
layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () {
var element = layui.element;
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
var laydate = layui.laydate;
laydate.render({
elem: '#startTime',
type: "datetime"
});
laydate.render({
elem: '#endTime',
type: "datetime"
});
table.render({
elem: '#tableId',
url:'data/user.json',
limit: 10,
page: true,
cols: [[
{type: 'checkbox'},
{field:'id', title:'ID', width:80, sort: true},
{field:'username', title:'用户名', width:100},
{field:'name', title: '姓名', width:100},
{field:'password', title:'密码', width:100},
{field:'status', title:'状态', width:85, templet: '#statusTpl'},
{field:'role', title:'角色', width:100, templet: '#roleTpl'},
{field:'email', title:'邮箱', width:200},
{field:'createTime', title:'创建时间', width:200},
{field:'logins', title:'登陆次数', width:100},
{title:'操作', width:200, templet: '#operationTpl', align:'center'}
]],
done: function(res, curr, count){
$("#countNum").text(count);
}
});
form.on('submit(search)', function () {
layer.msg('正在查询，请稍后...');
return false;
});
table.on('tool(tableFilter)', function(obj){
var data = obj.data;
var layEvent = obj.event;
if(layEvent === 'edit'){
layer.open({
title: '编辑用户',
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
area: ['90%', '90%'],
content: 'user-edit.html',
zIndex: layer.zIndex,
end: function () {
// $(".layui-laypage-btn")[0].click();
}
});
}else if(layEvent === 'del'){
layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title:'提示', anim: 6}, function () {
layer.msg("操作成功！", {icon: 1, time: 1000});
});
}
});
$("#batchEnabled").click(function(){
layer.confirm("确定要批量启用吗？", {skin: 'layui-layer-lan', icon: 3, title:'提示', anim: 1}, function () {
layer.msg("操作成功！", {icon: 1, time: 1000});
});
})
$("#batchDisabled").click(function(){
layer.confirm("确定要批量停用吗？", {skin: 'layui-layer-lan', icon: 3, title:'提示', anim: 2}, function () {
layer.msg("操作成功！", {icon: 1, time: 1000});
});
})
$("#batchDel").click(function(){
layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title:'提示', anim: 6}, function () {
layer.msg("操作成功！", {icon: 1, time: 1000});
});
})
$("#addUser").click(function(){
layer.open({
title: '添加用户',
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
anim: 4,
area: ['90%', '90%'],
content: 'user-add.html',
zIndex: layer.zIndex,
// skin: 'layui-layer-molv', // 皮肤
end: function () {
// $(".layui-laypage-btn")[0].click();
}
});
})
})
</script>
<!--模板-->
<script type="text/html" id="statusTpl">
<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" {{ d.status == 0 ? 'checked' : ''}}>
</script>
<script type="text/html" id="roleTpl">
{{ d.role == 0 ? '管理员' : '普通用户 '}}
</script>
<script type="text/html" id="operationTpl">
<a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>

10
donate.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>捐赠页面</title>
</head>
<body>
<h1>捐赠页面，待开发...</h1>
</body>
</html>

37
index.html
View File

@ -58,12 +58,13 @@
<i class="layui-icon">&#xe62a;</i> 常用页面
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="user.html" tab-id="1">用户列表</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="2">文章列表</a></dd>
<dd><a href="javascript:;" path="login.html" tab-id="3">登陆页面</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="3">404页面</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="4">500页面</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="5">403页面</a></dd>
<dd><a href="javascript:;" path="user.html" tab-id="1-1">用户列表</a></dd>
<dd><a href="javascript:;" path="article.html" tab-id="1-2">文章列表</a></dd>
<dd><a href="javascript:;" path="login.html" tab-id="1-3">登陆页面</a></dd>
<dd><a href="javascript:;" path="404.html" tab-id="1-4">404页面</a></dd>
<dd><a href="javascript:;" path="403.html" tab-id="1-5">403页面</a></dd>
<dd><a href="javascript:;" path="500.html" tab-id="1-6">500页面</a></dd>
<dd><a href="javascript:;" path="donate.html" tab-id="1-7">捐赠页面</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -71,13 +72,13 @@
<i class="layui-icon">&#xe62c;</i> 图表页面
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="xxxx.html" tab-id="6">折线图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="7">柱状图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="8">雷达图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="9">热力图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="10">仪表图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="11">饼图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="12">地图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="2-1">折线图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="2-2">柱状图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="2-3">雷达图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="2-4">热力图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="2-5">仪表图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="2-6">饼图</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="2-7">地图</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -85,8 +86,8 @@
<i class="layui-icon">&#xe646;</i> 字体图标
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="font-layui.html" tab-id="13">Layui内置图标库</a></dd>
<dd><a href="javascript:;" path="font-iconfont.html" tab-id="14">阿里巴巴图标库</a></dd>
<dd><a href="javascript:;" path="font-layui.html" tab-id="3-1">Layui内置图标库</a></dd>
<dd><a href="javascript:;" path="font-iconfont.html" tab-id="3-2">阿里巴巴图标库</a></dd>
</dl>
</li>
<li class="layui-nav-item">
@ -94,9 +95,9 @@
<i class="layui-icon">&#xe716;</i> 系统管理
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" path="xxxx.html" tab-id="15">系统设置</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="16">屏蔽词</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="17">系统日志</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="4-1">系统设置</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="4-2">屏蔽词</a></dd>
<dd><a href="javascript:;" path="xxxx.html" tab-id="4-3">系统日志</a></dd>
</dl>
</li>
</ul>