0

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

            });

おそらくバグ？

4

2 に答える 2

1

スタックを作成する場所に注意する必要があります。たとえば、if ステートメントで作成しないでください。通知ごとに新しいスタックが作成され、スタックが重複するためです。index.htmlのコメントでpnotifyホームページでこれを見つけました：

  /*********** 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;
                }
            });

それがあなたを助けることを願っています！

于 2014-08-29T07:45:02.820 に答える
0

@Tristan Reifertで言及されているように、 notice init 内でスタック オブジェクトを設定することと、そのスタック オブジェクトを通知するために 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
    });
}

ここでの主なポイントは、same-stack 通知は、それ用に構成された 1 つの同じスタック オブジェクトを受け取る必要があるということです。上記の場合、新しいオブジェクトは各関数呼び出しで初期化され、各通知は異なるオブジェクトを受け取ります。

これを回避するには、すべての通知で同じオブジェクトを扱う必要があります。例：

    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()、前の通知が以前に対処した同じスタック オブジェクトに対処します。

于 2015-08-12T13:32:23.030 に答える