[英]How can i use / append pnotify to a 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>
在我重新閱讀了您的問題之后,我假設您可能正在尋找此更新示例中的內容,數據屬性下面提供了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);
}
);
});
如果您的意思是根據樣本進行說明
<button class="btn btn-default source"
onclick="$.pnotify({ title: 'Regular Notice'
, text: 'i am a note from pnotify'});"
>Regular Notice</button>
您可以通過添加onclick屬性和激活pnotify的功能來創建pnotify。 看到該樣品下方的數據屬性提供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觸發。
來自http://sciactive.com/pnotify/#demos-simple
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();
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.