效果图示:
Snarl.js 不依赖任何库,通过函数调用,弹出消息窗口,可设定时间关闭
调用方法很简单
$('#basic-demo').click(function() {
Snarl.addNotification({
title: 'Ahoy there, Skipper',
text: 'Hello, world!'
});
});
支持图标,FontAwesome 字体
$('#icon-demo').click(function() {
Snarl.addNotification({
title: 'Custom Icons',
text: 'Cool, huh? Supports images, svgs, and glyphicon fonts.',
icon: '<i class="fa fa-globe"></i>'
});
});
时间设定
Snarl.setDefaultOptions({
timeout: 5000
});
// 或
$('#custom-timeout-demo').click(function() {
Snarl.addNotification({
title: 'Custom Timeouts',
text: 'This notification has an 8000ms timeout!',
icon: '<i class="fa fa-clock-o"></i>',
timeout: 8000
});
});
手动关闭
var noTimeoutNotification = null;
$('#no-timeout-open').click(function() {
if (Snarl.isDismissed(noTimeoutNotification)) {
noTimeoutNotification = Snarl.addNotification({
title: 'No Timeout',
text: 'Close the notification by pressing either the dismiss button on the page or in the notification.',
icon: '<i class="fa fa-ban"></i>',
timeout: null
});
}
});
$('#no-timeout-close').click(function() {
Snarl.removeNotification(noTimeoutNotification);
});
消息类型显示为 URL 超链接
$('#snarl-callback-string').click(function() {
Snarl.addNotification({
title: 'String Callback',
text: 'Click this notification to visit a url',
icon: '<i class="fa fa-github fa-lg"></i>'
action: 'http://github.com/hoxxep/Snarl'
});
});
更多应用,请参考网址 https://hoxxep.github.io/snarl/