Question

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

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

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

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

Answer 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/

Answer 2

为什么不改变容器的样式？原始代码位于：http://jsfiddle.net/craga89/YCfx4/ 所以只需改变

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

到

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

jGrowl - 使用qTip 2.0（jQuery）的插件。定位问题

2 个答案: