重新触发 bootstrap 通知功能后,对话框不应出现两次(或更多次)
Dialog should not appear twice (or more) after retrigger bootstrap notify funtion
我使用bootstrap notify来显示保存功能。问题是,用户可以保存多个。
示例:用户每秒单击按钮(Checkbox1、Checkbox2,...)。每个复选框都会调用通知功能。
目标:对话框应该出现 3 秒。如果在 3 秒内再次单击该按钮,则不应出现进一步的对话框。
3秒但应该从头开始(重新触发)
$(function(){
$(".btn").on("click",function(){
$.notify({
title: 'This dialog should appear only once',
icon: 'glyphicon glyphicon-star',
message: ""
},{
type: 'info',
animate: {
enter: 'animated fadeInUp',
exit: 'animated fadeOutRight'
},
placement: {
from: "bottom",
align: "left"
},
offset: 20,
spacing: 10,
z_index: 1031,
timer: 3000,
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">click me</button>
您可以使用 onClosed 事件让您知道通知何时结束,而打开时您可以使用标志阻止它再次打开,您可以更改当触发 onClosed 事件时...
$(function(){
var busy = false;
$(".btn").on("click",function(){
if(!busy) {
busy=true;
$.notify({
title: 'This dialog should appear only once',
icon: 'glyphicon glyphicon-star',
message: ""
},{
type: 'info',
animate: {
enter: 'animated fadeInUp',
exit: 'animated fadeOutRight'
},
placement: {
from: "bottom",
align: "left"
},
offset: 20,
spacing: 10,
z_index: 1031,
timer: 3000,
onClosed: function() {
busy=false;
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">click me</button>
我使用bootstrap notify来显示保存功能。问题是,用户可以保存多个。
示例:用户每秒单击按钮(Checkbox1、Checkbox2,...)。每个复选框都会调用通知功能。
目标:对话框应该出现 3 秒。如果在 3 秒内再次单击该按钮,则不应出现进一步的对话框。 3秒但应该从头开始(重新触发)
$(function(){
$(".btn").on("click",function(){
$.notify({
title: 'This dialog should appear only once',
icon: 'glyphicon glyphicon-star',
message: ""
},{
type: 'info',
animate: {
enter: 'animated fadeInUp',
exit: 'animated fadeOutRight'
},
placement: {
from: "bottom",
align: "left"
},
offset: 20,
spacing: 10,
z_index: 1031,
timer: 3000,
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">click me</button>
您可以使用 onClosed 事件让您知道通知何时结束,而打开时您可以使用标志阻止它再次打开,您可以更改当触发 onClosed 事件时...
$(function(){
var busy = false;
$(".btn").on("click",function(){
if(!busy) {
busy=true;
$.notify({
title: 'This dialog should appear only once',
icon: 'glyphicon glyphicon-star',
message: ""
},{
type: 'info',
animate: {
enter: 'animated fadeInUp',
exit: 'animated fadeOutRight'
},
placement: {
from: "bottom",
align: "left"
},
offset: 20,
spacing: 10,
z_index: 1031,
timer: 3000,
onClosed: function() {
busy=false;
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.5/bootstrap-notify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">click me</button>