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`。

![](/uploads/images/20230107/2160d3e2758ef699e4a145efb16b93cf.png)

#### 封装后的使用
| 参数  | 说明  |
| ------------ | ------------ |
| $msg  | 提示信息  |
| $type | 提示类型：`'info'`, `'success'`, `'warning'`, `'danger'`  |
| $delay | 定义消息提示消失的时间，毫秒数  |
| $icon | 图标，例如：`'mdi mdi-emoticon-happy'`，具体参考[图标](http://lyear.itshubao.com/v5/lyear_other_icons.html "图标")  |
| $from | `'top'` 或 `'bottom'`  |
| $align | `'left'`, `'right'`, `'center'`  |
| $url | 跳转链接，`$delay` 毫秒后跳转  |

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

#### 插件的具体说明
插件有用到一些动画效果，请结合 `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版以来，模板选项已经进行了修改，希望能让用户更好地控制布局。请在上面找到默认模板的代码。                                                                             |

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

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