0

好的，我正在尝试使用 qTip 模拟 jGrowl 通知插件。qTip 有一个演示如何制作这样的功能：

http://craigsworks.com/projects/qtip2/demos/#growl

但是，这会将通知定位在右上角，我希望它们位于右下角。我试图弄乱定位，这在一定程度上很好，我只是无法让更新位置效果正常工作。如果页面上至少有 3 个通知，当一个消失时，第二个会完美重新定位，其他则不会。

有人可以帮我让updatePos功能按预期工作吗？

这是一个小提琴：http: //jsfiddle.net/bCcAB/

4

2 回答 2

1

在创建函数而不是

my: target.length ? 'bottom center' : 'bottom right',
at: target.length ? 'top center' : 'bottom right',

类型

my: 'bottom right',
at: target.length ? 'top right' : 'bottom right',

在更新功能而不是

api.options.position.target = !i ? [$(window).width() - 5,$(window).height()] : [
                    pos.left + width,
                    pos.top - height - 5
                ];
api.set('position.at', !i ? 'bottom right' : 'top center');
api.set('position.my', !i ? 'bottom right' : 'bottom center');

类型

api.options.position.target = !i ? [$(window).width() - 5,$(window).height()] : [
                    pos.left + width,
                    pos.top
                ];
api.set('position.at', !i ? 'bottom right' : 'top right');

看看这个：http: //jsfiddle.net/bCcAB/1/

于 2013-01-29T21:00:46.307 回答
1

为什么不直接改变容器的样式？原始代码在这里：http: //jsfiddle.net/craga89/YCfx4/ 所以只需更改

#qtip-growl-container{
    position: fixed;
    top: 10px; right: 10px;
}

至

#qtip-growl-container{
    position: fixed;
    bottom: 10px; right: 10px;
}
于 2014-10-02T11:28:03.333 回答