[英]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.