Snarl.js 消息弹窗

效果图示:

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/

赞(0) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...