Как я могу использовать / добавить pnotify к div

Я использую Pnotify для отправки уведомления, но уведомление показывается только в очень определенных местах. Я хочу добавить их в класс заголовка на моей странице, но я не уверен, как это сделать.

JS:

function showNotify(data){
    var notice = $.pnotify({
        type: 'success',
        delay: 300000,
        addclass: (isDevice)? 'body-device stack-topleft':'stack-topleft',
        mouse_reset: false
    }).click(function(e){
        notice.pnotify_remove();
    });
}

HTML-код, к которому я хочу добавить мое уведомление:

<div class="header">
    <div class="col-md-12" data-bind="with: activeRoute"></div>
</div>
Источник

2 ответа

Решение

С http://sciactive.com/pnotify/

function show_stack_context(type) {
    if (typeof stack_context === "undefined") stack_context = {
        "dir1": "down",
        "dir2": "left",
        "context": $("#stack-context")
    };
    var opts = {
        title: "Over Here",
        text: "Check me out. I'm in a different stack.",
        stack: stack_context
    };
    switch (type) {
    case 'error':
        opts.title = "Oh No";
        opts.text = "Watch out for that water tower!";
        opts.type = "error";
        break;
    case 'info':
        opts.title = "Breaking News";
        opts.text = "Have you met Ted?";
        opts.type = "info";
        break;
    case 'success':
        opts.title = "Good News Everyone";
        opts.text = "I've invented a device that bites shiny metal asses.";
        opts.type = "success";
        break;
    }
    $.pnotify(opts);
}

так что вы бы

function showNotify(data){
    if (typeof stack_context === "undefined") stack_context = {
        "dir1": "down",
        "dir2": "left",
        "context": $(".header")
    };
    var opts = {
        title: "Over Here",
        text: "Notification",
        type: 'success',
        delay: 300000,
        addclass: (isDevice)? 'body-device stack-topleft':'stack-topleft',
        mouse_reset: false
        stack: stack_context
    };
    var notice = $.pnotify(opts).click(function(e){
        notice.pnotify_remove();
    });
}
Источник

Обновление для адреса, как добавить pnotify к классу заголовка

После того, как я перечитал ваш вопрос, я предполагаю, что вы, возможно, ищете что-то похожее на этот обновленный пример. Ниже атрибут data предоставляет заголовок и текст сообщения pnotify.

<div class="header" 
          data-title="notify 1" 
          data-text="text 1">Header with autowiring of pnotify</div>

<div class="header" 
          data-title="better notify 2" 
          data-text="other text 2">Header 2</div>

Для связи с классом заголовка вы можете добавить этот код:

 function getNotifiyMessage(that){      
      var mytitle = $(that).attr("data-title" );
      var mytext = $(that).attr("data-text");          
      return { title: mytitle, text: mytext};
    };

    $(document).ready(function() {

          $(".header").click(
            function(){
              var notifyMessage = getNotifiyMessage(this);
              $.pnotify(notifyMessage);
            }
          );
    });

Старый первый ответ

Если вы имеете в виду это pnotify на основе образца

<button class="btn btn-default source" 
      onclick="$.pnotify({ title: 'Regular Notice'
            , text: 'i am a note from pnotify'});"
  >Regular Notice</button>

Вы можете создать pnotify, добавив атрибут onclick с функцией активации pnotify. Посмотрите этот пример. Ниже атрибут data предоставляет заголовок и текст сообщения pnotify.

<div class="header" 
  onclick="$.pnotify({ title: 'Regular Notice', text: 'i am a note from pnotify'});">
  <div class="col-md-12" 
       data-bind="with: activeRoute">go click me to see pnotify</div>
</div>

Обратите внимание, что над событием поднимается пузырек от внутреннего div к внешнему div, а затем срабатывает pnotify.

Источник
Другие вопросы по тегам