[英]change jquery onclick to function base in javascript
这是一个通知系统,当我点击按钮时,它会出现一个通知。 我的按钮代码是
<h5 class="mb-4">Bootstrap Notify</h5>
<a href="#" class="btn btn-outline-primary rounded notify-btn mb-1" data-from="top" data-align="left">Top Left</a>
此 jquery 脚本上的 onclick 正在运行。
$("body").on("click", ".notify-btn", (function (e) {
var t, a, n;
e.preventDefault(), t = $(this).data("from"), a = $(this).data("align"), n = "primary", $.notify({
title: "Bootstrap Notify",
message: "Here is a notification!",
target: "_blank"
}, {
element: "body",
position: null,
type: n,
allow_dismiss: !0,
newest_on_top: !1,
showProgressbar: !1,
placement: {
from: t,
align: a
},
offset: 20,
spacing: 10,
z_index: 1031,
delay: 4e3,
timer: 2e3,
url_target: "_blank",
mouse_over: null,
animate: {
enter: "animated fadeInDown",
exit: "animated fadeOutUp"
},
onShow: null,
onShown: null,
onClose: null,
onClosed: null,
icon_type: "class",
template: '<div data-notify="container" class="col-11 col-sm-3 alert alert-{0} " role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
})
}))
这工作正常。 但我需要作为 function 呼叫系统。
showNotification(msg);
脚本应该是这样的
function showNotification(msg){
//code follows....
}
要执行您需要的操作,请使用对$.notify()
的调用定义 function 并传入type
、 from
和align
arguments 作为参数:
function showNotification(type, from, align) {
$.notify({
title: "Bootstrap Notify",
message: "Here is a notification!",
target: "_blank"
}, {
// some properties removed for brevity...
type: type,
placement: {
from: from,
align: align
}
})
}
$("body").on("click", ".notify-btn", e => {
e.preventDefault();
let $button = $(e.target);
showNotification("primary", $button.data("from"), $button.data("align"));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.