插件使用用Bootstrap Notify 3.1.3,文档地址:http://bootstrap-notify.remabledesigns.com/,github地址:https://github.com/mouse0270/bootstrap-notify。
为了方便使用,在v5版本,将最初的封装方法放到 main.min.js
中,方便子页面调用。方法名:showNotify
。记住:需要用到的页面,还需要引入 animate.min.css
。
参数 | 说明 |
---|---|
$msg | 提示信息 |
$type | 提示类型:'info', 'success', 'warning', 'danger' |
$delay | 定义消息提示消失的时间,毫秒数 |
$icon | 图标,例如:'mdi mdi-emoticon-happy',具体参考图标 |
$from | 'top' 或 'bottom' |
$align | 'left', 'right', 'center' |
$url | 跳转链接,$delay毫秒后跳转 |
使用示例
showNotify('修改成功,页面即将自动跳转~', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
子页面调用,请在前面使用parent,常用只需要填前面三个参数。
详细文档以及使用配置
当前JS
插件有用到一些动画效果,请结合 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>' });
Name | Type / Values | Required | Description |
---|---|---|---|
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属性指定打开链接通知的位置。 |
Name | Type / Values | Default | Description |
---|---|---|---|
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版以来,模板选项已经进行了修改,希望能让用户更好地控制布局。请在上面找到默认模板的代码。 |