Jquery Pnotify =左下角配置无法正常工作

2exbekwf  于 5个月前  发布在  jQuery
关注(0)|答案(3)|浏览(55)

使用Pnotify插件http://sciactive.com/pnotify/
我正试图重新定位它到屏幕的左下角,并有它推了连续的菜单..
定位不是问题,但是通知的方向都是一个一个叠加的(我只看到最新的通知,其他的都在后面)
代码应该是直接的,

var stack_bottomleft = {"dir1": "up", "dir2": "up", "push": "top"};

            new PNotify({
                title: "Title",
                type: "Success",
                text: "My Message 1",
                animation: "fade",
                animate_speed: 'fast',

                addclass: "stack-bottomleft",
                stack:    stack_bottomleft

            });

            new PNotify({
                title: "Title",
                type: "Success",
                text: "My Message 2",
                animation: "fade",
                animate_speed: 'fast',

                addclass: "stack-bottomleft",
                stack:    stack_bottomleft

            });

            new PNotify({
                title: "Title",
                type: "Success",
                text: "My Message 3",
                animation: "fade",
                animate_speed: 'fast',

                addclass: "stack-bottomleft",
                stack:    stack_bottomleft

            });

字符串
也许是一个bug?

ykejflvf

ykejflvf1#

你必须注意你在哪里创建你的堆栈。例如,不要在if语句中创建它,因为它会为每个通知创建一个新的堆栈,堆栈会重新加载。我在pnotify主页上的index.html评论中找到了这个:

/*********** Custom Stacks ***********
    * A stack is an object which PNotify uses to determine where
    * to position notices. A stack has two mandatory variables, dir1
    * and dir2. dir1 is the first direction in which the notices are
    * stacked. When the notices run out of room in the window, they
    * will move over in the direction specified by dir2. The directions
    * can be "up", "down", "right", or "left". Stacks are independent
    * of each other, so a stack doesn't know and doesn't care if it
    * overlaps (and blocks) another stack. The default stack, which can
    * be changed like any other default, goes down, then left. Stack
    * objects are used and manipulated by PNotify, and therefore,
    * should be a variable when passed. So, calling something like
    *
    * new PNotify({stack: {"dir1": "down", "dir2": "left"}});
    *
    * will **NOT** work. It will create a notice, but that notice will
    * be in its own stack and may overlap other notices.
    */

字符串
我也有同样的问题:

$rootScope.$watch('feedback',function(){
                if($rootScope.feedback){
                 var stack_bottomleft = {"dir1": "up", "dir2": "right", "firstpos1": 25, "firstpos2": 25};
                    new PNotify({
                        title: $rootScope.feedback.title,
                        text: $rootScope.feedback.text,
                        type: $rootScope.feedback.type,
                        addclass: 'stack-bottomleft',
                        stack: stack_bottomleft
                    });
                    $rootScope.feedback=null;
                }
            });


并将其固定为:

var stack_bottomleft = {"dir1": "up", "dir2": "right", "firstpos1": 25, "firstpos2": 25};
            $rootScope.$watch('feedback',function(){
                if($rootScope.feedback){
                    new PNotify({
                        title: $rootScope.feedback.title,
                        text: $rootScope.feedback.text,
                        type: $rootScope.feedback.type,
                        addclass: 'stack-bottomleft',
                        stack: stack_bottomleft
                    });
                    $rootScope.feedback=null;
                }
            });


希望对你有帮助!

t0ybt7op

t0ybt7op2#

就像mentioned x x @Tristan Reifert一样,在notice init中设置堆栈对象和将堆栈对象传输到notice init参数之间有一个关键的区别
因此,即使下一个代码也不会工作:

var showNotice = function () {
    var stack = {dir1: "up", dir2: "left", firstpos1: 25, firstpos2: 25},

    return new PNotify({
        title: 'Some title', text: 'Some text',
        addclass: "stack-bottomright",
        stack: stack
    });
}

字符串
这里的要点是,同栈通知应该接收为其配置的同一个栈对象。在上面的例子中,新对象将在每次函数调用时初始化,每个通知将接收不同的对象。
为了避免这种情况,所有通知都应针对同一对象。例如:

var stack = {dir1: "up", dir2: "left", firstpos1: 25, firstpos2: 25},
        showNotice = function () {     
            return new PNotify({
                title: 'Some title', text: 'Some text',
                addclass: "stack-bottomright",
                stack: stack
            });
        }


这样,showNotice()的每个后续调用都将寻址前面注意到的相同堆栈对象。

6yoyoihd

6yoyoihd3#

在PNotify 5.2.0上
对我来说,只有当状态是PNotify.Stack的示例时,这才有效

defaultConfig.stack = new PNotify.Stack({
   dir1: "up", 
   dir2: "left",
   firstpos1: 25,
   firstpos2: 25, 
   push: "top",
   modal: false
});

字符串

相关问题