bootstrap-notify消息插件

插件使用用Bootstrap Notify 3.1.3。

文档地址：http://bootstrap-notify.remabledesigns.com/

github地址：https://github.com/mouse0270/bootstrap-notify。

在v3版本中，这个插件是做了一个简单的封装，v4的版本里面能取消了，是想让大家更多的使用它完整的一些功能，v5版本重新封装了一下。为了方便使用，在v5版本，将最初的封装方法放到 main.min.js 中，方便子页面调用。方法名：showNotify。记住：需要用到的页面，还需要引入 animate.min.css。

封装后的使用

使用示例

showNotify('修改成功，页面即将自动跳转~', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');

插件的具体说明

插件有用到一些动画效果，请结合 animate.min.css 使用，插件使用的基本结构如下：

$.notify({
    // options
    message: 'Hello World' 
},{
    // settings
    type: 'danger'
});

包含所有可用的 Options/Settings

$.notify({
    // options
    icon: 'glyphicon glyphicon-warning-sign',
    title: 'Bootstrap notify',
    message: 'Turning standard Bootstrap alerts into "notify" like notifications',
    url: 'https://github.com/mouse0270/bootstrap-notify',
    target: '_blank'
},{
    // settings
    element: 'body',
    position: null,
    type: "info",
    allow_dismiss: true,
    newest_on_top: false,
    showProgressbar: false,
    placement: {
        from: "top",
        align: "right"
    },
    offset: 20,
    spacing: 10,
    z_index: 1031,
    delay: 5000,
    timer: 1000,
    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-xs-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>' 
});

选项列表

设置列表

模板页面：http://lyear.itshubao.com/v5/lyear_js_notify.html

涉及的文件：

• lyear_js_notify.html
• js/bootstrap-notify.min.js