121 lines
3.4 KiB
JavaScript
121 lines
3.4 KiB
JavaScript
|
|
// 通知对话框分组
|
|
(function () {
|
|
|
|
// _notifySpace: 消息框之间的间距
|
|
// _notifies: 存放当前正在显示的对话框列表
|
|
var _orderNumber = 1, _notifySpace = 5, _notifies = [];
|
|
|
|
// 对话框关闭处理函数
|
|
function onNotifyHide() {
|
|
// 先清空之前尚未完成的动画
|
|
clearNotifiesAnimation();
|
|
|
|
var notify = this;
|
|
var notifyHeight = notify.el.outerHeight(true) + _notifySpace;
|
|
var notifyIndex = $.inArray(notify, _notifies);
|
|
_notifies.splice(notifyIndex, 1);
|
|
|
|
var count = _notifies.length;
|
|
if (count) {
|
|
for (var i = notifyIndex; i < count; i++) {
|
|
var item = _notifies[i];
|
|
item.top -= notifyHeight;
|
|
item.el.animate({
|
|
'top': item.top
|
|
});
|
|
}
|
|
|
|
// 按照 notify.top 重新排序
|
|
_notifies.sort(function (a, b) {
|
|
return a.top - b.top;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 所有对话框下移
|
|
function moveNotifiesDown(newNotify, fn) {
|
|
// 先清空之前尚未完成的动画
|
|
clearNotifiesAnimation();
|
|
|
|
var count = _notifies.length, finished = 0;
|
|
if (!count) {
|
|
fn.apply(window);
|
|
return;
|
|
}
|
|
|
|
var notifyHeight = newNotify.el.outerHeight(true) + _notifySpace;
|
|
for (var i = 0; i < count; i++) {
|
|
var item = _notifies[i];
|
|
item.top += notifyHeight;
|
|
item.el.animate({
|
|
'top': item.top
|
|
}, function () {
|
|
// 动画完成后执行的函数
|
|
finished++;
|
|
|
|
if (finished >= count) {
|
|
fn.apply(window);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 停止动画，并回调
|
|
function clearNotifiesAnimation() {
|
|
var count = _notifies.length;
|
|
if (count) {
|
|
for (var i = 0; i < count; i++) {
|
|
var item = _notifies[i];
|
|
var itemEl = item.el;
|
|
if (itemEl.is(":animated")) {
|
|
itemEl.stop(false, true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 获取对话框元素的top属性
|
|
function calcNotifyTop() {
|
|
var top = _notifySpace;
|
|
if (_notifies.length) {
|
|
var lastNotify = _notifies[_notifies.length - 1];
|
|
top += lastNotify.top + lastNotify.el.outerHeight(true);
|
|
}
|
|
return top;
|
|
}
|
|
|
|
// 公开方法
|
|
window.showNotifyGroup = function (options, newestOnTop) {
|
|
// 创建一个消息对话框实例
|
|
$.extend(options, {
|
|
cls: 'notify-group-item', // 自定义样式
|
|
constrainInitialSize: false, // 不限制初始大小，因为本示例的消息框可能会超出页面边界
|
|
positionX: 'right',
|
|
listeners: {
|
|
hide: onNotifyHide
|
|
}
|
|
});
|
|
|
|
if (newestOnTop) {
|
|
// 最新的显示在最上方，需要先隐藏，等 moveNotifiesDown 之后再显示
|
|
options.hidden = true;
|
|
options.top = _notifySpace;
|
|
} else {
|
|
options.top = calcNotifyTop();
|
|
}
|
|
|
|
var notify = F.notify(options);
|
|
|
|
if (newestOnTop) {
|
|
moveNotifiesDown(notify, function () {
|
|
notify.show();
|
|
});
|
|
_notifies.splice(0, 0, notify);
|
|
} else {
|
|
_notifies.push(notify);
|
|
}
|
|
}
|
|
|
|
|
|
})(); |