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

完善弹窗皮肤

v1.0
bobi 2019-06-26 00:21:04 +08:00
parent e07866d57c
commit 0461829f58
5 changed files with 324 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -32,11 +32,12 @@
bobi bobi
</a> </a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="javascript:;" path="pages/member/user-center.html">个人中心<span class="layui-badge-dot"></span></a></dd> <dd lay-unselect><a href="javascript:;" path="pages/member/user-center.html">个人中心<span class="layui-badge-dot"></span></a></dd>
<dd><a href="javascript:;" path="pages/member/user-info.html">基本资料</a></dd> <dd lay-unselect><a href="javascript:;" path="pages/member/user-info.html">基本资料</a></dd>
<dd><a href="javascript:;" path="pages/member/user-notify.html">消息中心</a></dd> <dd lay-unselect><a href="javascript:;" path="pages/member/user-notify.html">消息中心</a></dd>
<dd><a href="javascript:;" path="pages/member/user-security.html">安全设置</a></dd> <dd lay-unselect><a href="javascript:;" path="pages/member/user-security.html">安全设置</a><hr></dd>
<dd><a href="javascript:;" id="lock">锁定账户</a></dd> <dd lay-unselect><a href="javascript:;" id="alertSkin">弹窗皮肤</a><hr></dd>
<dd lay-unselect><a href="javascript:;" id="lock">锁定账户</a></dd>
</dl> </dl>
</li> </li>
<li class="layui-nav-item"><a href="javascript:void(0)" id="logout">退出</a></li> <li class="layui-nav-item"><a href="javascript:void(0)" id="logout">退出</a></li>

7
js/okadmin.js
View File

@ -95,6 +95,13 @@ layui.use(["element", "layer", "okTab", "okMenu", "okUtils", "okLayer"], functio
}); });
}); });
/**
* 弹窗皮肤
*/
$("#alertSkin").click(function () {
okLayer.open("弹窗皮肤", "pages/system/alertSkin.html", "50%", "45%", function (layero) {}, function () {});
});
/** /**
* 锁定账户 * 锁定账户
*/ */

6
lib/layui/lay/okmodules/okLayer.js
View File

@ -84,7 +84,7 @@ layui.define(["layer"], function (exports) {
var storage = window.localStorage; var storage = window.localStorage;
var skin = storage.getItem("skin"); var skin = storage.getItem("skin");
if (skin == 1) { if (skin == 1) {
// 默认皮肤 // 灰白色
return ""; return "";
} else if (skin == 2) { } else if (skin == 2) {
// 墨绿色 // 墨绿色
@ -92,7 +92,7 @@ layui.define(["layer"], function (exports) {
} else if (skin == 3) { } else if (skin == 3) {
// 蓝色 // 蓝色
return "layui-layer-lan"; return "layui-layer-lan";
} else if (skin == 4) { } else if (!skin || skin == 4) {
// 随机颜色 // 随机颜色
var skinArray = ["", "layui-layer-molv", "layui-layer-lan"]; var skinArray = ["", "layui-layer-molv", "layui-layer-lan"];
return skinArray[Math.floor(Math.random() * skinArray.length)]; return skinArray[Math.floor(Math.random() * skinArray.length)];
@ -109,7 +109,7 @@ layui.define(["layer"], function (exports) {
if (animArray.indexOf(anim) > -1) { if (animArray.indexOf(anim) > -1) {
// 用户选择的动画 // 用户选择的动画
return anim; return anim;
} else if (anim == 7) { } else if (!anim || anim == 7) {
// 随机动画 // 随机动画
return Math.floor(Math.random() * animArray.length); return Math.floor(Math.random() * animArray.length);
} }

100
pages/system/alertSkin.html Normal file
View File

@ -0,0 +1,100 @@
<!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="../../css/okadmin.css">
</head>
<body>
<div class="ok-body">
<!--面包屑导航区域-->
<div class="ok-body-breadcrumb">
<span class="layui-breadcrumb">
<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>
<!--form表单-->
<form class="layui-form ok-form" lay-filter="filter">
<div class="layui-form-item">
<label class="layui-form-label">弹窗皮肤</label>
<div class="layui-input-block" id="skin">
<input type="radio" name="skin" value="1" title="灰白色">
<input type="radio" name="skin" value="2" title="墨绿色" >
<input type="radio" name="skin" value="3" title="天蓝色">
<input type="radio" name="skin" value="4" title="随机" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">弹窗动画</label>
<div class="layui-input-block" id="anim">
<input type="radio" name="anim" value="0" title="平滑放大">
<input type="radio" name="anim" value="1" title="从上掉落" >
<input type="radio" name="anim" value="2" title="从底部往上滑入">
<input type="radio" name="anim" value="3" title="从左滑入">
<input type="radio" name="anim" value="4" title="从左翻滚">
<input type="radio" name="anim" value="5" title="渐显">
<input type="radio" name="anim" value="6" title="抖动">
<input type="radio" name="anim" value="7" title="随机">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["element", "form", "okLayer", "okUtils"], function () {
var form = layui.form;
var $ = layui.jquery;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
// 单选框控件默认选中
var storage = window.localStorage;
var skin = storage.getItem("skin");
var anim = storage.getItem("anim");
var _skin = okUtils.number.isNumberWith(skin, 1, 4) ? skin : 4;
$("#skin").find("input").each(function () {
var val = $(this).val();
if (val == _skin) {
console.log(val, _skin)
$(this).prop("checked", true);
}
});
var _anim = okUtils.number.isNumberWith(anim, 0, 7) ? anim : 7;
$("#anim").find("input").each(function () {
var val = $(this).val();
if (val == _anim) {
console.log(val, anim)
$(this).prop("checked", true);
}
});
form.render()
form.on("submit(edit)", function (data) {
// 持久化skin和anim
var storage = window.localStorage;
storage.skin = data.field.skin;
storage.anim = data.field.anim;
okLayer.msg.greenTick("设置成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
return false;
});
})
</script>
</body>
</html>

416
pages/system/system-setting.html
View File

@ -1,211 +1,211 @@
<!DOCTYPE html> <!--<!DOCTYPE html>-->
<html> <!--<html>-->
<head> <!--<head>-->
<meta charset="UTF-8"> <!--<meta charset="UTF-8">-->
<title>网站配置</title> <!--<title>网站配置</title>-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">-->
<link rel="stylesheet" href="../../css/okadmin.css"> <!--<link rel="stylesheet" href="../../css/okadmin.css">-->
</head> <!--</head>-->
<body> <!--<body>-->
<div class="ok-body"> <!--<div class="ok-body">-->
<!--面包屑导航区域--> <!--&lt;!&ndash;面包屑导航区域&ndash;&gt;-->
<div class="ok-body-breadcrumb"> <!--<div class="ok-body-breadcrumb">-->
<span class="layui-breadcrumb"> <!--<span class="layui-breadcrumb">-->
<a><cite>首页</cite></a> <!--<a><cite>首页</cite></a>-->
<a><cite>系统管理</cite></a> <!--<a><cite>系统管理</cite></a>-->
<a><cite>网站配置</cite></a> <!--<a><cite>网站配置</cite></a>-->
</span> <!--</span>-->
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新"> <!--<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">-->
<i class="layui-icon layui-icon-refresh"></i> <!--<i class="layui-icon layui-icon-refresh"></i>-->
</a> <!--</a>-->
</div> <!--</div>-->
<!-- tab选项卡 --> <!--&lt;!&ndash; tab选项卡 &ndash;&gt;-->
<div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief"> <!--<div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief">-->
<ul class="layui-tab-title"> <!--<ul class="layui-tab-title">-->
<li class="layui-this">弹窗皮肤/动画</li> <!--<li class="layui-this">弹窗皮肤/动画</li>-->
<li>网站皮肤</li> <!--<li>网站皮肤</li>-->
<li>系统基本参数</li> <!--<li>系统基本参数</li>-->
<li>待开发1</li> <!--<li>待开发1</li>-->
<li>待开发2</li> <!--<li>待开发2</li>-->
</ul> <!--</ul>-->
<div class="layui-tab-content"> <!--<div class="layui-tab-content">-->
<!-- ====================================弹窗皮肤/动画==================================== --> <!--&lt;!&ndash; ====================================弹窗皮肤/动画==================================== &ndash;&gt;-->
<div class="layui-tab-item layui-show"> <!--<div class="layui-tab-item layui-show">-->
<blockquote class="layui-elem-quote"> <!--<blockquote class="layui-elem-quote">-->
推荐配置：弹窗皮肤（墨绿色），弹窗动画（随机） <!--推荐配置：弹窗皮肤（墨绿色），弹窗动画（随机）-->
</blockquote> <!--</blockquote>-->
<form class="layui-form"> <!--<form class="layui-form">-->
<table class="layui-table"> <!--<table class="layui-table">-->
<colgroup> <!--<colgroup>-->
<col> <!--<col>-->
<col> <!--<col>-->
<col> <!--<col>-->
</colgroup> <!--</colgroup>-->
<thead> <!--<thead>-->
<tr> <!--<tr>-->
<th>类别</th> <!--<th>类别</th>-->
<th>说明</th> <!--<th>说明</th>-->
<th>参数值</th> <!--<th>参数值</th>-->
</tr> <!--</tr>-->
</thead> <!--</thead>-->
<tbody> <!--<tbody>-->
<tr> <!--<tr>-->
<td>弹窗皮肤</td> <!--<td>弹窗皮肤</td>-->
<td>控制了msg()、confirm()、open()方法的弹窗皮肤</td> <!--<td>控制了msg()、confirm()、open()方法的弹窗皮肤</td>-->
<td> <!--<td>-->
<select name="skin" id="skin"> <!--<select name="skin" id="skin">-->
<option value="1">灰白色（默认皮肤）</option> <!--<option value="1">灰白色（默认皮肤）</option>-->
<option value="2">墨绿色</option> <!--<option value="2">墨绿色</option>-->
<option value="3">天蓝色</option> <!--<option value="3">天蓝色</option>-->
<option value="4">随机</option> <!--<option value="4">随机</option>-->
</select> <!--</select>-->
</td> <!--</td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>弹窗动画</td> <!--<td>弹窗动画</td>-->
<td>控制了msg()、confirm()、open()方法的弹窗动画</td> <!--<td>控制了msg()、confirm()、open()方法的弹窗动画</td>-->
<td> <!--<td>-->
<select name="anim" id="anim"> <!--<select name="anim" id="anim">-->
<option value="0">平滑放大（默认动画）</option> <!--<option value="0">平滑放大（默认动画）</option>-->
<option value="1">从上掉落</option> <!--<option value="1">从上掉落</option>-->
<option value="2">从最底部往上滑入</option> <!--<option value="2">从最底部往上滑入</option>-->
<option value="3">从左滑入</option> <!--<option value="3">从左滑入</option>-->
<option value="4">从左翻滚</option> <!--<option value="4">从左翻滚</option>-->
<option value="5">渐显</option> <!--<option value="5">渐显</option>-->
<option value="6">抖动</option> <!--<option value="6">抖动</option>-->
<option value="7">随机</option> <!--<option value="7">随机</option>-->
</select> <!--</select>-->
</td> <!--</td>-->
</tr> <!--</tr>-->
</tbody> <!--</tbody>-->
</table> <!--</table>-->
<div class="tar"> <!--<div class="tar">-->
<button class="layui-btn" lay-submit lay-filter="skinAnimSubmit">立即提交</button> <!--<button class="layui-btn" lay-submit lay-filter="skinAnimSubmit">立即提交</button>-->
<button type="reset" class="layui-btn layui-btn-primary">重置</button> <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
</div> <!--</div>-->
</form> <!--</form>-->
</div> <!--</div>-->
<!-- ====================================网站皮肤==================================== --> <!--&lt;!&ndash; ====================================网站皮肤==================================== &ndash;&gt;-->
<div class="layui-tab-item">网站皮肤</div> <!--<div class="layui-tab-item">网站皮肤</div>-->
<!-- ====================================系统基本参数==================================== --> <!--&lt;!&ndash; ====================================系统基本参数==================================== &ndash;&gt;-->
<div class="layui-tab-item"> <!--<div class="layui-tab-item">-->
<form class="layui-form"> <!--<form class="layui-form">-->
<table class="layui-table"> <!--<table class="layui-table">-->
<colgroup> <!--<colgroup>-->
<col> <!--<col>-->
<col> <!--<col>-->
<col> <!--<col>-->
</colgroup> <!--</colgroup>-->
<thead> <!--<thead>-->
<tr> <!--<tr>-->
<th>参数说明</th> <!--<th>参数说明</th>-->
<th>变量名</th> <!--<th>变量名</th>-->
<th>参数值</th> <!--<th>参数值</th>-->
</tr> <!--</tr>-->
</thead> <!--</thead>-->
<tbody> <!--<tbody>-->
<tr> <!--<tr>-->
<td>网站名称</td> <!--<td>网站名称</td>-->
<td>website</td> <!--<td>website</td>-->
<td><input class="layui-input" placeholder="网站名称" autocomplete="off" value="ok-admin"></td> <!--<td><input class="layui-input" placeholder="网站名称" autocomplete="off" value="ok-admin"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>当前版本</td> <!--<td>当前版本</td>-->
<td>version</td> <!--<td>version</td>-->
<td><input class="layui-input" placeholder="当前版本" autocomplete="off" value="v1.0"></td> <!--<td><input class="layui-input" placeholder="当前版本" autocomplete="off" value="v1.0"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>开发作者</td> <!--<td>开发作者</td>-->
<td>author</td> <!--<td>author</td>-->
<td><input class="layui-input" placeholder="开发作者" autocomplete="off" value="bobi"></td> <!--<td><input class="layui-input" placeholder="开发作者" autocomplete="off" value="bobi"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>网站首页</td> <!--<td>网站首页</td>-->
<td>homePage</td> <!--<td>homePage</td>-->
<td><input class="layui-input" placeholder="网站首页" autocomplete="off" value="index.html"></td> <!--<td><input class="layui-input" placeholder="网站首页" autocomplete="off" value="index.html"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>服务器环境</td> <!--<td>服务器环境</td>-->
<td>server</td> <!--<td>server</td>-->
<td><input class="layui-input" placeholder="服务器环境" autocomplete="off" value="CentOS"></td> <!--<td><input class="layui-input" placeholder="服务器环境" autocomplete="off" value="CentOS"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>数据库版本</td> <!--<td>数据库版本</td>-->
<td>dataBase</td> <!--<td>dataBase</td>-->
<td><input class="layui-input" placeholder="数据库版本" autocomplete="off" value="MySQL5.7"></td> <!--<td><input class="layui-input" placeholder="数据库版本" autocomplete="off" value="MySQL5.7"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>最大上传限制</td> <!--<td>最大上传限制</td>-->
<td>maxUpload</td> <!--<td>maxUpload</td>-->
<td><input class="layui-input" placeholder="最大上传限制" autocomplete="off" value="2M"></td> <!--<td><input class="layui-input" placeholder="最大上传限制" autocomplete="off" value="2M"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>用户权限</td> <!--<td>用户权限</td>-->
<td>userRights</td> <!--<td>userRights</td>-->
<td><input class="layui-input" placeholder="用户权限" autocomplete="off" value="超级管理员"></td> <!--<td><input class="layui-input" placeholder="用户权限" autocomplete="off" value="超级管理员"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>网站关键字</td> <!--<td>网站关键字</td>-->
<td>keywords</td> <!--<td>keywords</td>-->
<td><input class="layui-input" placeholder="默认关键字" autocomplete="off" value="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载"></td> <!--<td><input class="layui-input" placeholder="默认关键字" autocomplete="off" value="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>网站描述</td> <!--<td>网站描述</td>-->
<td>description</td> <!--<td>description</td>-->
<td><textarea class="layui-textarea" placeholder="网站描述" autocomplete="off">ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。</textarea></td> <!--<td><textarea class="layui-textarea" placeholder="网站描述" autocomplete="off">ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。</textarea></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>版权信息</td> <!--<td>版权信息</td>-->
<td>powerby</td> <!--<td>powerby</td>-->
<td><input class="layui-input" placeholder="版权信息" autocomplete="off" value="Copyright ©2018-©2019 ok-admin v1.0 All Rights Reserved"></td> <!--<td><input class="layui-input" placeholder="版权信息" autocomplete="off" value="Copyright ©2018-©2019 ok-admin v1.0 All Rights Reserved"></td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td>网站备案号</td> <!--<td>网站备案号</td>-->
<td>record</td> <!--<td>record</td>-->
<td><input class="layui-input" placeholder="网站备案号" autocomplete="off" value="川ICP备xxxxxxxx号"></td> <!--<td><input class="layui-input" placeholder="网站备案号" autocomplete="off" value="川ICP备xxxxxxxx号"></td>-->
</tr> <!--</tr>-->
</tbody> <!--</tbody>-->
</table> <!--</table>-->
<div class="tar"> <!--<div class="tar">-->
<button class="layui-btn" lay-submit lay-filter="basicParamSubmit">立即提交</button> <!--<button class="layui-btn" lay-submit lay-filter="basicParamSubmit">立即提交</button>-->
<button type="reset" class="layui-btn layui-btn-primary">重置</button> <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
</div> <!--</div>-->
</form> <!--</form>-->
</div> <!--</div>-->
<div class="layui-tab-item">待开发1</div> <!--<div class="layui-tab-item">待开发1</div>-->
<div class="layui-tab-item">待开发2</div> <!--<div class="layui-tab-item">待开发2</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
<!--js逻辑--> <!--&lt;!&ndash;js逻辑&ndash;&gt;-->
<script src="../../lib/layui/layui.js"></script> <!--<script src="../../lib/layui/layui.js"></script>-->
<script> <!--<script>-->
layui.use(["element", "form", "okLayer", "okUtils"], function () { <!--layui.use(["element", "form", "okLayer", "okUtils"], function () {-->
var $ = layui.jquery; <!--var $ = layui.jquery;-->
var form = layui.form; <!--var form = layui.form;-->
var okLayer = layui.okLayer; <!--var okLayer = layui.okLayer;-->
var okUtils = layui.okUtils; <!--var okUtils = layui.okUtils;-->
// select控件默认选中 <!--// select控件默认选中-->
var storage = window.localStorage; <!--var storage = window.localStorage;-->
var skin = storage.getItem("skin"); <!--var skin = storage.getItem("skin");-->
var anim = storage.getItem("anim"); <!--var anim = storage.getItem("anim");-->
$("#skin").val(okUtils.number.isNumberWith(skin, 1, 4) ? skin : 1); <!--$("#skin").val(okUtils.number.isNumberWith(skin, 1, 4) ? skin : 1);-->
$("#anim").val(okUtils.number.isNumberWith(anim, 0, 7) ? anim : 0); <!--$("#anim").val(okUtils.number.isNumberWith(anim, 0, 7) ? anim : 0);-->
form.render() <!--form.render()-->
form.on("submit(skinAnimSubmit)", function (data) { <!--form.on("submit(skinAnimSubmit)", function (data) {-->
storage.skin = data.field.skin; <!--storage.skin = data.field.skin;-->
storage.anim = data.field.anim; <!--storage.anim = data.field.anim;-->
okLayer.msg.greenTick("设置成功") <!--okLayer.msg.greenTick("设置成功")-->
return false; <!--return false;-->
}); <!--});-->
form.on("submit(basicParamSubmit)", function (data) { <!--form.on("submit(basicParamSubmit)", function (data) {-->
alert("basicParamSubmit"); <!--alert("basicParamSubmit");-->
return false; <!--return false;-->
}); <!--});-->
}) <!--})-->
</script> <!--</script>-->
</body> <!--</body>-->
</html> <!--</html>-->