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

按照layui模块化规范开发

v1.0
Mr.X 2018-06-06 00:18:57 +08:00
parent 2be26cd04d
commit 4e2112a36c
8 changed files with 437 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
css/okadmin.css
View File

@ -1,158 +1,158 @@
@charset "utf-8";
@import "../lib/layui/css/layui.css";
@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css";
/*@charset "utf-8";*/
/*@import "../lib/layui/css/layui.css";*/
/*@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css";*/
/*顶部导航菜单logo样式*/
.layui-layout-admin .layui-logo {
color: #fff;
font-size: 20px;
}
/*!*顶部导航菜单logo样式*!*/
/*.layui-layout-admin .layui-logo {*/
/*color: #fff;*/
/*font-size: 20px;*/
/*}*/
/*顶部导航文字菜单样式*/
.layui-nav {
padding: 0;
}
/*!*顶部导航文字菜单样式*!*/
/*.layui-nav {*/
/*padding: 0;*/
/*}*/
/*顶部菜单左边部分菜单样式*/
.layui-layout-left {
left: 235px;
}
/*!*顶部菜单左边部分菜单样式*!*/
/*.layui-layout-left {*/
/*left: 235px;*/
/*}*/
/*第一个tan选项卡隐藏取消图标*/
.layui-tab-title li:first-child .layui-tab-close {
display: none;
}
/*!*第一个tan选项卡隐藏取消图标*!*/
/*.layui-tab-title li:first-child .layui-tab-close {*/
/*display: none;*/
/*}*/
/*隐藏/显示左边菜单按钮样式*/
.menu-switch {
width: 30px;
height: 30px;
position: relative;
left: 200px;
top: 18px;
color: #fff;
background-color: #1AA094;
text-align: center;
line-height: 30px;
cursor: pointer;
}
/*!*隐藏/显示左边菜单按钮样式*!*/
/*.menu-switch {*/
/*width: 30px;*/
/*height: 30px;*/
/*position: relative;*/
/*left: 200px;*/
/*top: 18px;*/
/*color: #fff;*/
/*background-color: #1AA094;*/
/*text-align: center;*/
/*line-height: 30px;*/
/*cursor: pointer;*/
/*}*/
/*主体内容样式*/
.content-body {
position: absolute;
top: 46px;
right: 0px;
bottom: 42px;
left: 200px;
z-index: 1;
overflow: hidden;
}
/*!*主体内容样式*!*/
/*.content-body {*/
/*position: absolute;*/
/*top: 46px;*/
/*right: 0px;*/
/*bottom: 42px;*/
/*left: 200px;*/
/*z-index: 1;*/
/*overflow: hidden;*/
/*}*/
/*主体内容选项卡内容样式*/
.content-body .layui-tab-content {
position: absolute;
top: 50px;
bottom: 0px;
width: 100%;
padding: 0px;
overflow: hidden;
}
/*!*主体内容选项卡内容样式*!*/
/*.content-body .layui-tab-content {*/
/*position: absolute;*/
/*top: 50px;*/
/*bottom: 0px;*/
/*width: 100%;*/
/*padding: 0px;*/
/*overflow: hidden;*/
/*}*/
/*使iframe高度100%,它的父类高度也需要100%*/
.content-body .layui-tab-content .layui-tab-item {
height: 100%;
}
/*!*使iframe高度100%,它的父类高度也需要100%*!*/
/*.content-body .layui-tab-content .layui-tab-item {*/
/*height: 100%;*/
/*}*/
/*使iframe高度100*/
.content-body .layui-tab-content .layui-tab-item iframe {
height: 100%;
/*!*使iframe高度100*!*/
/*.content-body .layui-tab-content .layui-tab-item iframe {*/
/*height: 100%;*/
}
/*}*/
/*子页面(user.html、article.html等)的主体内容*/
.ok-body {
padding: 10px;
}
/*!*子页面(user.html、article.html等)的主体内容*!*/
/*.ok-body {*/
/*padding: 10px;*/
/*}*/
/*子页面面包屑导航样式*/
.ok-body-breadcrumb {
position: relative;
line-height: 39px;
height: 41px;
border-bottom: 1px solid rgb(229, 229, 229);
}
/*!*子页面面包屑导航样式*!*/
/*.ok-body-breadcrumb {*/
/*position: relative;*/
/*line-height: 39px;*/
/*height: 41px;*/
/*border-bottom: 1px solid rgb(229, 229, 229);*/
/*}*/
/*子页面面包屑导航刷新按钮*/
.ok-body-breadcrumb .layui-btn {
line-height: 2.4em;
margin-top: 3px;
float: right
}
/*!*子页面面包屑导航刷新按钮*!*/
/*.ok-body-breadcrumb .layui-btn {*/
/*line-height: 2.4em;*/
/*margin-top: 3px;*/
/*float: right*/
/*}*/
/*子页面面包屑导航刷新按钮图标*/
.ok-body-breadcrumb .layui-btn .layui-icon {
line-height: 40px;
}
/*!*子页面面包屑导航刷新按钮图标*!*/
/*.ok-body-breadcrumb .layui-btn .layui-icon {*/
/*line-height: 40px;*/
/*}*/
/*
.ok-search {
text-align: center;
}
/*!**/
/*.ok-search {*/
/*text-align: center;*/
/*}*/
.ok-search input.layui-input {
width: 190px;
}*/
/*.ok-search input.layui-input {*/
/*width: 190px;*/
/*}*!*/
/*美化滚动条代码*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*!*美化滚动条代码*!*/
/*::-webkit-scrollbar {*/
/*width: 10px;*/
/*height: 10px;*/
/*}*/
::-webkit-scrollbar-button:vertical {
display: none;
}
/*::-webkit-scrollbar-button:vertical {*/
/*display: none;*/
/*}*/
::-webkit-scrollbar-track:vertical {
background-color: black;
}
/*::-webkit-scrollbar-track:vertical {*/
/*background-color: black;*/
/*}*/
::-webkit-scrollbar-track-piece {
background-color: #F5F5F5;
}
/*::-webkit-scrollbar-track-piece {*/
/*background-color: #F5F5F5;*/
/*}*/
::-webkit-scrollbar-thumb:vertical {
margin-right: 10px;
background-color: #A6A6A6;
}
/*::-webkit-scrollbar-thumb:vertical {*/
/*margin-right: 10px;*/
/*background-color: #A6A6A6;*/
/*}*/
::-webkit-scrollbar-thumb:vertical:hover {
background-color: #aaa;
}
/*::-webkit-scrollbar-thumb:vertical:hover {*/
/*background-color: #aaa;*/
/*}*/
::-webkit-scrollbar-corner:vertical {
background-color: #535353;
}
/*::-webkit-scrollbar-corner:vertical {*/
/*background-color: #535353;*/
/*}*/
::-webkit-scrollbar-resizer:vertical {
background-color: #FF6E00;
}
/*::-webkit-scrollbar-resizer:vertical {*/
/*background-color: #FF6E00;*/
/*}*/
/*响应式代码控制*/
@media screen and (max-width: 768px) {
.layui-layout-admin .layui-bg-black {
left: -200px;
}
/*!*响应式代码控制*!*/
/*@media screen and (max-width: 768px) {*/
/*.layui-layout-admin .layui-bg-black {*/
/*left: -200px;*/
/*}*/
.layui-layout-admin .content-body {
left: 0;
}
/*.layui-layout-admin .content-body {*/
/*left: 0;*/
/*}*/
.layui-layout-admin .layui-footer {
left: 0;
}
/*.layui-layout-admin .layui-footer {*/
/*left: 0;*/
/*}*/
.layui-layout-left {
display: none;
}
}
/*.layui-layout-left {*/
/*display: none;*/
/*}*/
/*}*/

34
css/scroll-bar.css Normal file
View File

@ -0,0 +1,34 @@
/*美化滚动条代码*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:vertical {
display: none;
}
::-webkit-scrollbar-track:vertical {
background-color: black;
}
::-webkit-scrollbar-track-piece {
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb:vertical {
margin-right: 10px;
background-color: #A6A6A6;
}
::-webkit-scrollbar-thumb:vertical:hover {
background-color: #aaa;
}
::-webkit-scrollbar-corner:vertical {
background-color: #535353;
}
::-webkit-scrollbar-resizer:vertical {
background-color: #FF6E00;
}

18
font-iconfont.html
View File

@ -3,7 +3,17 @@
<head>
<meta charset="UTF-8">
<title>阿里巴巴图标库</title>
<link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="lib/layui/css/layui.css">
<style>
/*主体内容样式*/
.ok-body{padding:10px}
/*子页面面包屑导航样式*/
.ok-body-breadcrumb{position:relative;line-height:39px;height:41px;border-bottom:1px solid #e5e5e5}
/*子页面面包屑导航刷新按钮样式*/
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
/*子页面面包屑导航刷新按钮图标样式*/
.ok-body-breadcrumb .layui-btn .layui-icon{line-height:40px}
</style>
</head>
<body>
<div class="ok-body">
@ -32,6 +42,10 @@
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script>
<script>
layui.use(['element', 'code'], function () {
layui.code({about: false});
})
</script>
</body>
</html>

18
font-layui.html
View File

@ -3,7 +3,17 @@
<head>
<meta charset="UTF-8">
<title>Layui内置图标库</title>
<link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="lib/layui/css/layui.css">
<style>
/*主体内容样式*/
.ok-body{padding:10px}
/*子页面面包屑导航样式*/
.ok-body-breadcrumb{position:relative;line-height:39px;height:41px;border-bottom:1px solid #e5e5e5}
/*子页面面包屑导航刷新按钮样式*/
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
/*子页面面包屑导航刷新按钮图标样式*/
.ok-body-breadcrumb .layui-btn .layui-icon{line-height:40px}
</style>
</head>
<body>
<div class="ok-body">
@ -32,6 +42,10 @@
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script>
<script>
layui.use(['element', 'code'], function () {
layui.code({about: false});
})
</script>
</body>
</html>

96
index.html
View File

@ -7,7 +7,36 @@
<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"/>
<link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css">
<style>
/*顶部导航菜单logo样式*/
.layui-layout-admin .layui-logo{color:#fff;font-size:20px}
/*顶部导航文字菜单样式*/
.layui-nav{padding:0}
/*顶部菜单左边部分菜单样式*/
.layui-layout-left{left:235px}
/*第一个tan选项卡隐藏取消图标*/
.layui-tab-title li:first-child .layui-tab-close{display:none}
/*隐藏/显示左边菜单按钮样式*/
.menu-switch{width:30px;height:30px;position:relative;left:200px;top:18px;color:#fff;background-color:#1AA094;text-align:center;line-height:30px;cursor:pointer}
/*主体内容样式*/
.content-body{position:absolute;top:46px;right:0;bottom:42px;left:200px;z-index:1;overflow:hidden}
/*主体内容选项卡内容样式*/
.content-body .layui-tab-content{position:absolute;top:50px;bottom:0;width:100%;padding:0;overflow:hidden}
/*使iframe高度100%,它的父类高度也需要100%*/
.content-body .layui-tab-content .layui-tab-item{height:100%}
/*使iframe高度100*/
.content-body .layui-tab-content .layui-tab-item iframe{height:100%}
/*响应式代码控制*/
@media screen and (max-width:768px){
.layui-layout-admin .layui-bg-black{left:-200px}
.layui-layout-admin .content-body{left:0}
.layui-layout-admin .layui-footer{left:0}
.layui-layout-left{display:none}
}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
@ -117,6 +146,69 @@
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script>
<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>
</body>
</html>

184
js/okadmin.js
View File

@ -1,92 +1,92 @@
layui.use(['element', 'jquery', 'code', 'layer'], function () {
var element = layui.element;
var $ = layui.jquery;
var layer = layui.layer;
// 引用code方法
layui.code({about: false});
/**
* 左边菜单显示/隐藏功能
* @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'>"
}]
});
});
});
/**
* 获取当前时间
*/
var nowDate1 = "";
function setDate() {
var date = new Date();
var year = date.getFullYear();
nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + " ";
nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
document.getElementById("nowTime").innerHTML = nowDate1;
setTimeout('setDate()', 1000);
}
/**
* 年月日是分秒为10以下的数字则添加0字符串
* @param time
* @returns {number | *}
*/
function addZero(time) {
var i = parseInt(time);
if (i / 10 < 1) {
i = "0" + i;
}
return i;
}
// layui.use(['element', 'jquery', 'code', 'layer'], function () {
// var element = layui.element;
// var $ = layui.jquery;
// var layer = layui.layer;
// // 引用code方法
// layui.code({about: false});
//
// /**
// * 左边菜单显示/隐藏功能
// * @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'>"
// }]
// });
// });
// });
//
//
// /**
// * 获取当前时间
// */
// var nowDate1 = "";
//
// function setDate() {
// var date = new Date();
// var year = date.getFullYear();
// nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + " ";
// nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
// document.getElementById("nowTime").innerHTML = nowDate1;
// setTimeout('setDate()', 1000);
// }
//
// /**
// * 年月日是分秒为10以下的数字则添加0字符串
// * @param time
// * @returns {number | *}
// */
// function addZero(time) {
// var i = parseInt(time);
// if (i / 10 < 1) {
// i = "0" + i;
// }
// return i;
// }

20
user.html
View File

@ -4,7 +4,18 @@
<meta charset="UTF-8">
<title>用户列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="css/scroll-bar.css">
<style>
/*主体内容样式*/
.ok-body{padding:10px}
/*子页面面包屑导航样式*/
.ok-body-breadcrumb{position:relative;line-height:39px;height:41px;border-bottom:1px solid #e5e5e5}
/*子页面面包屑导航刷新按钮样式*/
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
/*子页面面包屑导航刷新按钮图标样式*/
.ok-body-breadcrumb .layui-btn .layui-icon{line-height:40px}
</style>
</head>
<body>
<div class="ok-body">
@ -244,6 +255,11 @@
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script>
<script>
layui.use(['element'], function () {
var element = layui.element;
var $ = layui.jquery;
})
</script>
</body>
</html>

41
welcome.html
View File

@ -7,7 +7,12 @@
<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"/>
<link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="css/scroll-bar.css">
<style>
/*主体内容样式*/
.ok-body{padding:10px}
</style>
</head>
<body>
<div class="ok-body">
@ -129,10 +134,38 @@
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="js/okadmin.js"></script>
<script type="text/javascript">
// 初始化函数
<script>
/**
* 初始化函数
*/
setDate();
/**
* 获取当前时间
*/
var nowDate1 = "";
function setDate() {
var date = new Date();
var year = date.getFullYear();
nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + " ";
nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
document.getElementById("nowTime").innerHTML = nowDate1;
setTimeout('setDate()', 1000);
}
/**
* 年月日是分秒为10以下的数字则添加0字符串
* @param time
* @returns {number | *}
*/
function addZero(time) {
var i = parseInt(time);
if (i / 10 < 1) {
i = "0" + i;
}
return i;
}
</script>
</body>
</html>