网站设置功能
bobi
parent
c698c9b3cd
commit
19cabc9336
|
|
@ -84,5 +84,10 @@ okToolbar span{float:right;line-height:30px}
|
|||
::-webkit-scrollbar-corner:vertical{background-color:#535353}
|
||||
::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}
|
||||
|
||||
/* 公共样式 */
|
||||
.tal{text-align:left;}
|
||||
.tac{text-align:center;}
|
||||
.tar{text-align:right;}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
layui.define(["layer"], function (exports) {
|
||||
var $ = layui.jquery;
|
||||
var okLayer = {
|
||||
// 控制了msg() confirm() open()方法的弹窗皮肤
|
||||
skinStyle: 3,
|
||||
// 控制了msg() confirm() open()方法的弹窗动画
|
||||
animStyle: 2,
|
||||
/**
|
||||
* confirm()函数二次封装
|
||||
* @param content
|
||||
|
|
@ -85,15 +81,21 @@ layui.define(["layer"], function (exports) {
|
|||
* @returns {string}
|
||||
*/
|
||||
skinChoose: function () {
|
||||
if (okLayer.skinStyle == 1) {
|
||||
var storage = window.localStorage;
|
||||
var skin = storage.getItem("skin");
|
||||
if (skin == 1) {
|
||||
// 默认皮肤
|
||||
return "";
|
||||
} else if (okLayer.skinStyle == 2) {
|
||||
} else if (skin == 2) {
|
||||
// 墨绿色
|
||||
return "layui-layer-molv";
|
||||
} else if (okLayer.skinStyle == 3) {
|
||||
} else if (skin == 3) {
|
||||
// 蓝色
|
||||
return "layui-layer-lan";
|
||||
} else if (skin == 4) {
|
||||
// 随机颜色
|
||||
var skinArray = ["", "layui-layer-molv", "layui-layer-lan"];
|
||||
return skinArray[Math.floor(Math.random() * skinArray.length)];
|
||||
}
|
||||
},
|
||||
/**
|
||||
|
|
@ -101,12 +103,15 @@ layui.define(["layer"], function (exports) {
|
|||
* @returns {number}
|
||||
*/
|
||||
animChoose: function () {
|
||||
if (okLayer.animStyle == 1) {
|
||||
// 默认动画
|
||||
return 0;
|
||||
} else if (okLayer.animStyle == 2) {
|
||||
var storage = window.localStorage;
|
||||
var anim = storage.getItem("anim");
|
||||
var animArray = ["0", "1", "2", "3", "4", "5", "6"];
|
||||
if (animArray.indexOf(anim) > -1) {
|
||||
// 用户选择的动画
|
||||
return anim;
|
||||
} else if (anim == 7) {
|
||||
// 随机动画
|
||||
return Math.floor(Math.random() * 7);
|
||||
return Math.floor(Math.random() * animArray.length);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,216 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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="../../css/okadmin.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>网站配置</h1>
|
||||
<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-sm" href="javascript:location.replace(location.href);" title="刷新">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- tab选项卡 -->
|
||||
<div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">弹窗皮肤/动画</li>
|
||||
<li>网站皮肤</li>
|
||||
<li>系统基本参数</li>
|
||||
<li>待开发1</li>
|
||||
<li>待开发2</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<!-- ====================================弹窗皮肤/动画==================================== -->
|
||||
<div class="layui-tab-item layui-show">
|
||||
<blockquote class="layui-elem-quote">
|
||||
推荐配置：弹窗皮肤（墨绿色），弹窗动画（随机）
|
||||
</blockquote>
|
||||
<form class="layui-form">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>类别</th>
|
||||
<th>说明</th>
|
||||
<th>参数值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>弹窗皮肤</td>
|
||||
<td>控制了msg()、confirm()、open()方法的弹窗皮肤</td>
|
||||
<td>
|
||||
<select name="skin" id="skin">
|
||||
<option value="1">灰白色（默认皮肤）</option>
|
||||
<option value="2">墨绿色</option>
|
||||
<option value="3">天蓝色</option>
|
||||
<option value="4">随机</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>弹窗动画</td>
|
||||
<td>控制了msg()、confirm()、open()方法的弹窗动画</td>
|
||||
<td>
|
||||
<select name="anim" id="anim">
|
||||
<option value="0">平滑放大（默认动画）</option>
|
||||
<option value="1">从上掉落</option>
|
||||
<option value="2">从最底部往上滑入</option>
|
||||
<option value="3">从左滑入</option>
|
||||
<option value="4">从左翻滚</option>
|
||||
<option value="5">渐显</option>
|
||||
<option value="6">抖动</option>
|
||||
<option value="7">随机</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="tar">
|
||||
<button class="layui-btn" lay-submit lay-filter="skinAnimSubmit">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- ====================================网站皮肤==================================== -->
|
||||
<div class="layui-tab-item">网站皮肤</div>
|
||||
<!-- ====================================系统基本参数==================================== -->
|
||||
<div class="layui-tab-item">
|
||||
<form class="layui-form">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数说明</th>
|
||||
<th>变量名</th>
|
||||
<th>参数值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>网站名称</td>
|
||||
<td>website</td>
|
||||
<td><input class="layui-input" placeholder="网站名称" autocomplete="off" value="ok-admin"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>当前版本</td>
|
||||
<td>version</td>
|
||||
<td><input class="layui-input" placeholder="当前版本" autocomplete="off" value="v1.0"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>开发作者</td>
|
||||
<td>author</td>
|
||||
<td><input class="layui-input" placeholder="开发作者" autocomplete="off" value="bobi"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>网站首页</td>
|
||||
<td>homePage</td>
|
||||
<td><input class="layui-input" placeholder="网站首页" autocomplete="off" value="index.html"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>服务器环境</td>
|
||||
<td>server</td>
|
||||
<td><input class="layui-input" placeholder="服务器环境" autocomplete="off" value="CentOS"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数据库版本</td>
|
||||
<td>dataBase</td>
|
||||
<td><input class="layui-input" placeholder="数据库版本" autocomplete="off" value="MySQL5.7"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最大上传限制</td>
|
||||
<td>maxUpload</td>
|
||||
<td><input class="layui-input" placeholder="最大上传限制" autocomplete="off" value="2M"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>用户权限</td>
|
||||
<td>userRights</td>
|
||||
<td><input class="layui-input" placeholder="用户权限" autocomplete="off" value="超级管理员"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>网站关键字</td>
|
||||
<td>keywords</td>
|
||||
<td><input class="layui-input" placeholder="默认关键字" autocomplete="off" value="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>网站描述</td>
|
||||
<td>description</td>
|
||||
<td><textarea class="layui-textarea" placeholder="网站描述" autocomplete="off">ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。</textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>版权信息</td>
|
||||
<td>powerby</td>
|
||||
<td><input class="layui-input" placeholder="版权信息" autocomplete="off" value="Copyright ©2018-©2019 ok-admin v1.0 All Rights Reserved"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>网站备案号</td>
|
||||
<td>record</td>
|
||||
<td><input class="layui-input" placeholder="网站备案号" autocomplete="off" value="川ICP备xxxxxxxx号"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="tar">
|
||||
<button class="layui-btn" lay-submit lay-filter="basicParamSubmit">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="layui-tab-item">待开发1</div>
|
||||
<div class="layui-tab-item">待开发2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: "../../lib/layui_plugins/"
|
||||
}).extend({
|
||||
okLayer: "okLayer/okLayer",
|
||||
okUtils: "okUtils/okUtils"
|
||||
}).use(["element", "form", "okLayer", "okUtils"], function () {
|
||||
var $ = layui.jquery;
|
||||
var form = layui.form;
|
||||
var okLayer = layui.okLayer;
|
||||
var okUtils = layui.okUtils;
|
||||
|
||||
// select控件默认选中
|
||||
var storage = window.localStorage;
|
||||
var skin = storage.getItem("skin");
|
||||
var anim = storage.getItem("anim");
|
||||
$("#skin").val(skin);
|
||||
$("#anim").val(anim);
|
||||
form.render()
|
||||
|
||||
form.on("submit(skinAnimSubmit)", function (data) {
|
||||
storage.skin = data.field.skin;
|
||||
storage.anim = data.field.anim;
|
||||
okLayer.msg.greenTick("设置成功")
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on("submit(basicParamSubmit)", function (data) {
|
||||
alert("basicParamSubmit");
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue