bootstrap-notify.js - 如何设置页面允许的最大显示消息?

时间:2015-08-29 12:46:44

标签: javascript twitter-bootstrap

这是我正在使用的bootstrap-notify设置:

var options = {
                    title: title,
                    message: message
                };

                var settings = {
                    element: '#page-wrapper',
                    position: 'fixed',
                    type: type,
                    placement: {
                        from: "top",
                        align: "center"
                    },
                    z_index: 3000,
                    animate: {
                        enter: "animated fadeInDown",
                        exit: "animated fadeOutUp",
                    },
                    template:
                        '<div data-notify="container" role="alert" class="col-xs-11 col-sm-8 alert alert-{0}" style="margin: 15px 0 15px 0">\
                            <button type="button" class="close" data-notify="dismiss">\
                                <span aria-hidden="true">×</span>\
                                <span class="sr-only">Close</span>\
                            </button>\
                            <span data-notify="icon"></span>\
                            <span data-notify="title">{1}</span>\
                            <span data-notify="message" style="padding-right:15px">{2}</span>\
                            <a href="{3}" target="{4}" data-notify="url"></a>\
                        </div>'
                };

                $.notify(options, settings);

我想在任何时候设置页面上显示的最大邮件数量,这样它就不会使邮件充满信息。

2 个答案:

答案 0 :(得分:1)

template:
            '<div data-notify="container" role="alert" class="col-xs-11 col-sm-2 alert alert-{0}" style="margin: 15px 0 15px 0; width: 150px;">\
                <button type="button" class="close" data-notify="dismiss" style="top:7px;">\
                    <span aria-hidden="true">×</span>\
                    <span class="sr-only">Close</span>\
                </button>\
                <span data-notify="icon"></span>\
                <span data-notify="title">{1}</span>\
                <span data-notify="message" style="padding-right:15px">{2}</span>\
                <a href="{3}" target="{4}" data-notify="url"></a>\
            </div>'

为样式添加宽度,这没关系!

答案 1 :(得分:0)

对于一条消息: 给一个类通知模板设置中的div元素,并在通知之前将其删除。像这样:

$('div.notification').remove();
$.notify({
    message: "I hope I can help you"
}, {
    type: 'danger',
    template: '<div data-notify="container" class="notification alert alert-{0}" role="alert">' +
        '<img data-notify="icon" class="img-circle pull-left">' +
        '<span data-notify="title">{1}</span>' +
        '<span data-notify="message" style="display: inline-block;">{2}</span>' +
    '</div>'
});