bootstrap-notify消息(v4)

在上面的文档中 - [光年模板中的loading和消息(v3)](/manual/lyearadmin/26.html "光年模板中的loading和消息(v3)")，已经提到过该插件了，之所以单独弄一个文档，是因为v3是对插件做了简单的封装，使得使用起来更加便捷，但因为有些小伙伴可能会用到更多的插件的功能，所以v4中不再对该插件做封装，使用还是按插件官方的写法为主。

插件使用用Bootstrap Notify 3.1.3。

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

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

![](/uploads/images/20211229/917ccc2fd98bbdb25ec25b493a29f3f2.png)

插件有用到一些动画效果，请结合 `animate.min.css` 使用，插件使用的基本结构如下：
```javascript
$.notify({
    // options
    message: 'Hello World' 
},{
    // settings
    type: 'danger'
});
```
包含所有可用的 `Options/Settings`
```javascript
$.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>' 
});
```
选项列表

| 名称    | 类型 / 值 | 是否必须 | 说明 |
|---------|---------------|----------|-------------|
| icon    | class/src                     | No       | 这是将在通知通知中显示的图标。此图标可以是 class（字体图标）或图片url。如果您想使用图片url，请记住必须在选项中将 `icon_type` 设置为 `image`。 |
| title   | string                          | No       | 这是将在通知通知中显示的标题。请记住，除非您在css中设置了 `[data-notify="title"]` 样式，否则此样式看起来与消息相同。               |
| message | string                          | Yes      | 这是将在通知通知中显示的消息。                                                                    |
| url     | web address                     | No       | 如果设置此值，则会使整个通知（关闭按钮除外）成为可单击区域。如果用户单击此区域，则会将它们带到此处指定的url。                           |
| target  | _blank/_self/_parent/_top | no       | `target` 属性指定打开链接通知的位置。                                                               |
设置列表

| 名称            | 类型 / 值                               | 默认值             | 说明                                                                                                                    |
|-----------------|---------------------------------------------|---------------------|--------------------------------------------------------------------------------------------------------------------------------|
| element         | string                                      | body                | 将通知附加到特定元素。如果元素设置为文档正文以外的任何内容，则它将从 `position:fixed` 切换到 `position:absolute`。                                                       |
| position        | static / fixed / relative / absolute / null | null                | 允许用户指定通知容器元素的自定义位置。                                                                                                            |
| type            | string                                      | info                | 使用引导本地警报样式定义通知的样式。请记住，生成通知时，该类型的前缀是 `alert-`。使用原有警告框样式时，这不是问题，但如果在设置css时创建了新样式（如pink），则必须使用类 `alert-pink`。                         |
| allow_dismiss   | boolean                                     | true                | 如果将此值设置为 `false`，它将隐藏有 `data-grow="disside"` 的元素。请记住，如果修改 `template` 设置，并且不包含 `data-notify="dismiss"` 元素，即使此设置为 `true`，也不会有任何元素供用户单击以关闭通知。 |
| showProgressbar | boolean                                     | false               | 此 boolean 用于确定通知是否应显示进度条。                                                                                                      |
| placement.from  | string                                      | top                 | 这将控制通知将放在元素的 `top` 或 `bottom` 的位置。                                                                                                 |
| placement.align | string                                      | right               | 这将控制通知是否将放置在元素的 `left`、`center` 或 `right`。                                                                                           |
| offset          | integer                                     | 20                  | 这将在元素和通知之间创建一个内边距空间。                                                                                                           |
| offset.x        | integer                                     | 20                  | 这将在元素和通知之间的 `x` 轴上添加一个内边距空间。                                                                                                     |
| offset.y        | integer                                     | 20                  | 这将在元素和通知之间的 `y` 轴上添加一个内边距空间。                                                                                                     |
| spacing         | integer                                     | 10                  | 这将在具有相同位置的通知之间添加一个 `pixels` 的内边距，在它们的边之间创建一个空间。                                                                                  |
| z_index         | integer                                     | 1031                | 很简单，这将设置通知的css属性 `z-index` 。如果有其他元素与通知重叠，则可能需要提高此数字。                                                                             |
| delay           | integer                                     | 5000                | 如果 delay 设置为高于 0 的值，则在 `delay` 期间结束后，通知将自动关闭。请记住延迟使用毫秒，因此 5000 是 5 秒。                                                            |
| timer           | integer                                     | 1000                | 这是在每个 `timer` 毫秒时从通知中删除的毫秒数。因此，为了减少每1000毫秒的混淆，将从 `notify` 延迟的剩余时间中删除1000毫秒。 如果设置得更高，则在计时器用完之前，不会删除通知。                              |
| url_target      | _blank / _self / _parent / _top             | '_blank'            | 这将设置通知的url地址打开方式。 请检查 `HTML <a>` 标签的 `target` 属性以了解有关这些选项。                                                                   |
| mouse_over      | pause / null                                | null                | 默认情况下，此操作不起任何作用。如果将此选项设置为暂停，则它将pause通知延迟的计时器。从版本2.0.0之后，计时器将不会重置，它将从最后一次计时开始继续。                                                |
| animate.enter   | string                                      | animated fadeInDown | 这将控制用于在屏幕上生成通知的动画。从版本2.0.0之后，此插件没有与任何动画一起打包。请用 Daniel Eden 编写的 Animate.css。                                                    |
| animate.exit    | string                                      | animated fadeOutUp  | 这将控制用于在屏幕上生成通知的动画。从版本2.0.0之后，此插件没有与任何动画一起打包。请用 Daniel Eden 编写的 Animate.css。                                                    |
| onShow          | function                                    | null                | 调用 `show` 实例方法时，此事件立即激发。                                                                                                         |
| onShow          | function                                    | null                | 当消息框对用户可见时（将等待CSS转换完成）触发此事件。                                                                                                   |
| onClose         | function                                    | null                | 此事件在通知关闭时立即触发。                                                                                                                 |
| onClosed        | function                                    | null                | 当消息框完成关闭并从 `Document` 中移除时，将触发此事件（将等待CSS转换完成）。                                                                                   |
| icon_type       | string                                      | class               | 这是用来让插件知道你是使用图标字体，还是你使用图片。如果此设置未设置为 `image`，则默认为 `class`。请记住，如果你使用的是一个图片，你需将 `icon` 设置为图片的地址。                                        |
| template        | HTML                                        | code below          | 自3.0.0版以来，模板选项已经进行了修改，希望能让用户更好地控制布局。请在上面找到默认模板的代码。                                                                             |

涉及的文件：
- `lyear_js_notify.html`
- `js/bootstrap-notify.min.js`