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

188 lines
9.4 KiB
HTML
Raw Normal View History

添加空白首页
2018-05-04 09:02:57 +00:00
<!DOCTYPE html>
加入layui组件
2018-05-04 10:57:31 +00:00
<html>
添加空白首页
2018-05-04 09:02:57 +00:00
<head>
加入layui组件
2018-05-04 10:57:31 +00:00
<meta charset="utf-8">
<title>ok-admin | 很赞的后台模版</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
添加关键字和内容
2018-05-05 05:49:39 +00:00
<meta name="keywords" content="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
按照layui模块化规范开发
2018-06-05 16:18:57 +00:00
<link rel="stylesheet" href="lib/layui/css/layui.css">
index.html抽离css代码
2018-07-17 02:13:09 +00:00
<link rel="stylesheet" href="css/okadmin.css">
按照layui模块化规范开发
2018-06-05 16:18:57 +00:00
<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css">
添加空白首页
2018-05-04 09:02:57 +00:00
</head>
加入layui组件
2018-05-04 10:57:31 +00:00
<body class="layui-layout-body">
大体框架完成
2018-06-03 17:09:10 +00:00
<div class="layui-layout layui-layout-admin">
<!--头部导航-->
<div class="layui-header">
<div class="layui-logo">ok-admin v1.0</div>
隐藏/显示左边菜单+美化welcome.html页面
2018-06-04 03:17:22 +00:00
<div class="menu-switch">
加入响应式页面代码
2018-06-04 09:44:08 +00:00
<i class="iconfont icon-caidan"></i>
隐藏/显示左边菜单+美化welcome.html页面
2018-06-04 03:17:22 +00:00
</div>
大体框架完成
2018-06-03 17:09:10 +00:00
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item layui-this"><a href="">控制台<span class="layui-badge">9</span></a></li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
加入layui组件
2018-05-04 10:57:31 +00:00
<dl class="layui-nav-child">
大体框架完成
2018-06-03 17:09:10 +00:00
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
加入layui组件
2018-05-04 10:57:31 +00:00
</dl>
</li>
大体框架完成
2018-06-03 17:09:10 +00:00
</ul>
<ul class="layui-nav layui-layout-right">
加入layui组件
2018-05-04 10:57:31 +00:00
<li class="layui-nav-item">
添加关键字和内容
2018-05-05 05:49:39 +00:00
<a href="javascript:;">
加入本地头像
2018-06-05 13:45:31 +00:00
<img src="images/head.jpg" class="layui-nav-img">
大体框架完成
2018-06-03 17:09:10 +00:00
bobi
添加关键字和内容
2018-05-05 05:49:39 +00:00
</a>
加入layui组件
2018-05-04 10:57:31 +00:00
<dl class="layui-nav-child">
大体框架完成
2018-06-03 17:09:10 +00:00
<dd><a href="">个人中心<span class="layui-badge-dot"></span></a></dd>
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
增加锁定账户菜单
2018-07-10 02:52:34 +00:00
<dd><a href="">锁定账户</a></dd>
加入layui组件
2018-05-04 10:57:31 +00:00
</dl>
</li>
大体框架完成
2018-06-03 17:09:10 +00:00
<li class="layui-nav-item"><a href="">退出</a></li>
加入layui组件
2018-05-04 10:57:31 +00:00
</ul>
</div>
大体框架完成
2018-06-03 17:09:10 +00:00
<!--左侧导航区域-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
去除添加选项卡重复问题
2018-06-04 09:00:45 +00:00
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="">
大体框架完成
2018-06-03 17:09:10 +00:00
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">
完善左边菜单
2018-06-04 04:37:55 +00:00
<i class="layui-icon">&#xe62a;</i> 常用页面
大体框架完成
2018-06-03 17:09:10 +00:00
</a>
<dl class="layui-nav-child">
去除添加选项卡重复问题
2018-06-04 09:00:45 +00:00
<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="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>
大体框架完成
2018-06-03 17:09:10 +00:00
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
完善左边菜单
2018-06-04 04:37:55 +00:00
<i class="layui-icon">&#xe62c;</i> 图表页面
大体框架完成
2018-06-03 17:09:10 +00:00
</a>
<dl class="layui-nav-child">
去除添加选项卡重复问题
2018-06-04 09:00:45 +00:00
<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>
完善左边菜单
2018-06-04 04:37:55 +00:00
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
完善字体图标页面内容
2018-06-04 13:19:29 +00:00
<i class="layui-icon">&#xe646;</i> 字体图标
完善左边菜单
2018-06-04 04:37:55 +00:00
</a>
<dl class="layui-nav-child">
完善字体图标页面内容
2018-06-04 13:19:29 +00:00
<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>
完善左边菜单
2018-06-04 04:37:55 +00:00
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon">&#xe716;</i> 系统管理
</a>
<dl class="layui-nav-child">
去除添加选项卡重复问题
2018-06-04 09:00:45 +00:00
<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>
大体框架完成
2018-06-03 17:09:10 +00:00
</dl>
</li>
</ul>
</div>
</div>
加入layui组件
2018-05-04 10:57:31 +00:00
<!-- 内容主体区域 -->
大体框架完成
2018-06-03 17:09:10 +00:00
<div class="content-body">
去除添加选项卡重复问题
2018-06-04 09:00:45 +00:00
<div class="layui-tab layui-tab-brief" lay-filter="ok-tab" lay-allowClose="true">
大体框架完成
2018-06-03 17:09:10 +00:00
<ul class="layui-tab-title">
<li class="layui-this"><i class="layui-icon">&#xe68e;</i> 控制台</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src='welcome.html' frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
</div>
添加关键字和内容
2018-05-05 05:49:39 +00:00
</div>
</div>
</div>
大体框架完成
2018-06-03 17:09:10 +00:00
<!--底部信息-->
<div class="layui-footer">
添加捐赠作者功能
2018-06-04 13:41:00 +00:00
Copyright ©2018 ok-admin v1.0 All Rights Reserved <button class="layui-btn layui-btn-danger layui-btn-xs">捐赠作者</button>
大体框架完成
2018-06-03 17:09:10 +00:00
</div>
加入layui组件
2018-05-04 10:57:31 +00:00
</div>
大体框架完成
2018-06-03 17:09:10 +00:00
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
按照layui模块化规范开发
2018-06-05 16:18:57 +00:00
<script>
layui.use(['element', 'layer'], function () {
var element = layui.element;
var $ = layui.jquery;
var layer = layui.layer;
/**
* 左边菜单显示/隐藏功能
* @type {boolean}
*/
$(".menu-switch").click(function () {
if ($(".layui-layout-admin .layui-side").css("left") == '0px') {
$(".layui-layout-admin .layui-side").animate({left: "-200px"});
$(".layui-layout-admin .content-body").animate({left: "0px"});
$(".layui-layout-admin .layui-footer").animate({left: "0px"});
} else {
$(".layui-layout-admin .layui-side").animate({left: "0px"});
$(".layui-layout-admin .content-body").animate({left: "200px"});
$(".layui-layout-admin .layui-footer").animate({left: "200px"});
}
});
/**
* 点击左边菜单在右边添加选项卡
*/
$(".layui-nav-child").find("dd").click(function () {
var title = $(this).text();
var path = $(this).children('a').attr('path');
var tabId = $(this).children('a').attr('tab-id');
// 去重复选项卡
for (var i = 0; i < $('.ok-frame').length; i++) {
if ($('.ok-frame').eq(i).attr('tab-id') == tabId) {
element.tabChange("ok-tab", tabId);
event.stopPropagation();
return;
}
}
// 添加选项卡
element.tabAdd("ok-tab", {
title: title,
content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
id: tabId
});
// 切换选项卡
element.tabChange("ok-tab", tabId);
});
/**
* 捐赠作者
*/
$(".layui-footer button").click(function () {
layer.tab({
area: ["330px", "350px"],
tab: [{
title: "支付宝",
content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>"
}, {
title: "微信",
content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>"
}]
});
});
});
</script>
添加空白首页
2018-05-04 09:02:57 +00:00
</body>
</html>