add:皮肤动画
bobi
parent
7acf413b3c
commit
a2d35b52a6
16
index.html
16
index.html
|
|
@ -19,13 +19,14 @@
|
|||
<i class="layui-icon layui-icon-shrink-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- <li class="ok-nav-item ok-hide-md">-->
|
||||
<!-- <!– 天气信息 –>-->
|
||||
<!-- <div class="weather-ok">-->
|
||||
<!-- <iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>-->
|
||||
<!-- </div>-->
|
||||
<!-- </li>-->
|
||||
<!--天气信息-->
|
||||
<!--
|
||||
<li class="ok-nav-item ok-hide-md">
|
||||
<div class="weather-ok">
|
||||
<iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>
|
||||
</div>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item ok-input-search">
|
||||
|
|
@ -65,6 +66,7 @@
|
|||
<dd><a lay-id="u-1" href="javascript:" data-url="pages/member/user.html">个人中心<span class="layui-badge-dot"></span></a></dd>
|
||||
<dd><a lay-id="u-2" href="javascript:" data-url="pages/member/user-info.html">基本资料</a></dd>
|
||||
<dd><a lay-id="u-3" href="javascript:" data-url="pages/member/user-pwd.html">安全设置</a></dd>
|
||||
<dd><a lay-id="u-4" href="javascript:" id="alertSkin">皮肤动画</a></dd>
|
||||
<dd>
|
||||
<hr/>
|
||||
</dd>
|
||||
|
|
|
|||
|
|
@ -300,6 +300,13 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () {
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 弹窗皮肤
|
||||
*/
|
||||
$("#alertSkin").click(function () {
|
||||
okLayer.open("皮肤动画", "pages/system/alertSkin.html", "50%", "45%", function (layero) {}, function () {});
|
||||
});
|
||||
|
||||
/**
|
||||
* 退出操作
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
"use strict";
|
||||
layui.define(["layer"], function (exports) {
|
||||
var okLayer = {
|
||||
let okLayer = {
|
||||
/**
|
||||
* confirm()函数二次封装
|
||||
* @param content
|
||||
* @param yesFunction
|
||||
*/
|
||||
confirm: function (content, yesFunction) {
|
||||
var options = {skin: okLayer.skinChoose(), icon: 3, title: "提示", anim: okLayer.animChoose()};
|
||||
let options = {skin: okLayer.skinChoose(), icon: 3, title: "提示", anim: okLayer.animChoose()};
|
||||
layer.confirm(content, options, yesFunction);
|
||||
},
|
||||
/**
|
||||
|
|
@ -17,7 +17,7 @@ layui.define(["layer"], function (exports) {
|
|||
* @param width
|
||||
* @param height
|
||||
* @param successFunction
|
||||
* @param endFunction
|
||||
* @param endFunction
|
||||
*/
|
||||
open: function (title, content, width, height, successFunction, endFunction) {
|
||||
layer.open({
|
||||
|
|
@ -30,7 +30,7 @@ layui.define(["layer"], function (exports) {
|
|||
content: content,
|
||||
zIndex: layer.zIndex,
|
||||
skin: okLayer.skinChoose(),
|
||||
success: successFunction,
|
||||
success: successFunction,
|
||||
end: endFunction
|
||||
});
|
||||
},
|
||||
|
|
@ -42,37 +42,37 @@ layui.define(["layer"], function (exports) {
|
|||
time: 1000,
|
||||
// 绿色勾
|
||||
greenTick: function (content, callbackFunction) {
|
||||
var options = {icon: 1, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 1, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 红色叉
|
||||
redCross: function (content, callbackFunction) {
|
||||
var options = {icon: 2, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 2, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 黄色问号
|
||||
yellowQuestion: function (content, callbackFunction) {
|
||||
var options = {icon: 3, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 3, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 灰色锁
|
||||
grayLock: function (content, callbackFunction) {
|
||||
var options = {icon: 4, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 4, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 红色哭脸
|
||||
redCry: function (content, callbackFunction) {
|
||||
var options = {icon: 5, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 5, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 绿色笑脸
|
||||
greenLaugh: function (content, callbackFunction) {
|
||||
var options = {icon: 6, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 6, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
},
|
||||
// 黄色感叹号
|
||||
yellowSigh: function (content, callbackFunction) {
|
||||
var options = {icon: 7, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
let options = {icon: 7, time: okLayer.msg.time, anim: okLayer.animChoose()};
|
||||
layer.msg(content, options, callbackFunction);
|
||||
}
|
||||
},
|
||||
|
|
@ -81,8 +81,8 @@ layui.define(["layer"], function (exports) {
|
|||
* @returns {string}
|
||||
*/
|
||||
skinChoose: function () {
|
||||
var storage = window.localStorage;
|
||||
var skin = storage.getItem("skin");
|
||||
let storage = window.localStorage;
|
||||
let skin = storage.getItem("skin");
|
||||
if (skin == 1) {
|
||||
// 灰白色
|
||||
return "";
|
||||
|
|
@ -94,7 +94,7 @@ layui.define(["layer"], function (exports) {
|
|||
return "layui-layer-lan";
|
||||
} 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)];
|
||||
}
|
||||
},
|
||||
|
|
@ -103,11 +103,11 @@ layui.define(["layer"], function (exports) {
|
|||
* @returns {number}
|
||||
*/
|
||||
animChoose: function () {
|
||||
var storage = window.localStorage;
|
||||
var anim = storage.getItem("anim");
|
||||
var animArray = ["0", "1", "2", "3", "4", "5", "6"];
|
||||
let storage = window.localStorage;
|
||||
let anim = storage.getItem("anim");
|
||||
let animArray = ["0", "1", "2", "3", "4", "5", "6"];
|
||||
if (animArray.indexOf(anim) > -1) {
|
||||
// 用户选择的动画
|
||||
// 用户选择的动画
|
||||
return anim;
|
||||
} else if (!anim || anim == 7) {
|
||||
// 随机动画
|
||||
|
|
|
|||
|
|
@ -133,6 +133,32 @@ layui.define(["layer"], function (exprots) {
|
|||
if (new RegExp("(" + k + ")").test(fmt))
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
return fmt;
|
||||
},
|
||||
number: {
|
||||
/**
|
||||
* 判断是否为一个正常的数字
|
||||
* @param num
|
||||
*/
|
||||
isNumber: function (num) {
|
||||
if (num && !isNaN(num)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* 判断一个数字是否包括在某个范围
|
||||
* @param num
|
||||
* @param begin
|
||||
* @param end
|
||||
*/
|
||||
isNumberWith: function (num, begin, end) {
|
||||
if (this.isNumber(num)) {
|
||||
if (num >= begin && num <= end) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
exprots("okUtils", okUtils);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<!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/oksub.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="随机" checked>
|
||||
</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 () {
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let okLayer = layui.okLayer;
|
||||
let okUtils = layui.okUtils;
|
||||
|
||||
// 单选框控件默认选中
|
||||
let storage = window.localStorage;
|
||||
let skin = storage.getItem("skin");
|
||||
let anim = storage.getItem("anim");
|
||||
let _skin = okUtils.number.isNumberWith(skin, 1, 4) ? skin : 4;
|
||||
$("#skin").find("input").each(function () {
|
||||
let val = $(this).val();
|
||||
if (val == _skin) {
|
||||
$(this).prop("checked", true);
|
||||
}
|
||||
});
|
||||
|
||||
let _anim = okUtils.number.isNumberWith(anim, 0, 7) ? anim : 7;
|
||||
$("#anim").find("input").each(function () {
|
||||
let val = $(this).val();
|
||||
if (val == _anim) {
|
||||
$(this).prop("checked", true);
|
||||
}
|
||||
});
|
||||
|
||||
form.render()
|
||||
|
||||
form.on("submit(edit)", function (data) {
|
||||
// 持久化skin和anim
|
||||
let 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>
|
||||
Loading…
Reference in New Issue