Notify 基于 Bootstrap 的事件通知 jQuery 插件 - 文章教程

Notify 基于 Bootstrap 的事件通知 jQuery 插件

发布于 2019-04-09 字数 3630 浏览 2818 评论 0

以往的网页通知警告框都是在固定的位置,虽然有颜色字体的区分提示用户,但确实及其不友好的,他们也不够人性化的显示通知,这篇文章给大家介绍一个基于 Bootstrap 的插件,在网页的四个角落弹出消息通知。

Notify 基于 Bootstrap 的事件通知 jQuery 插件

什么是真正的通知,旨在提示用户最新的消息和警告,Notify是这样的一个插件,可以弹出一个警告框,在网页的四个角,可以自定义配置外观显示效果,并且可以自动隐藏。

使用方法

Notify 默认使用 Bootstrap 的警告框样式显示通知,当然你也可以使用自定义的显示样式。

<link href="css/styles/alert-bangtidy.css" rel="stylesheet">
<link href="css/styles/alert-blackgloss.css" rel="stylesheet">

除了引入上面的两个文件外,我们还需要引入 Notify 和 Bootstrap 的文件

<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="js/bootstrap-notify.js"></script>

接下来编写 HTML 代码

<div class='notifications top-left'></div>

配置 top-* 类,可以设置通知显示位置,通知支持四种不同的位置类,只有利用所提供的 CSS 文件。

Position Class Name Description
Top Left top-left 通知将出现固定在左上角
Top Right top-right 通知将出现固定在右上角
Bottom Left bottom-left 通知将出现固定在左下角
Bottom Right bottom-right 通知将出现固定在右下角

JavaScript代码

$('.top-left').notify({
    message: { text: 'Aw yeah, It works!' }
}).show();
// 对于那些不可关闭且不褪色的函数,可以使用 .hide() 函数

可选参数

Name type default description
type string ‘success’ Alert style, omit alert- from style name.
closable boolean true Allow alert to be closable through a close icon.
transition string ‘fade’ Alert transition, pretty sure only fade is supported, you can try others if you wish.
fadeOut object Fade alert out after a certain delay (in ms)

Object structure: fadeOut: { enabled: true, delay: 3000 }

message object Text to show on alert, you can use either html or text. HTML will override text.

Object structure: message: { html: false, text: 'This is a message.' }

onClose function Called before alert closes.
onClosed function Called after alert closes.

自定义样式

通知支持自定义样式,事实上,有几个来下载。左边的按钮显示。

自定义样式包括

  • bangTidy: css/styles/alert-bangtidy.css
  • blackgloss: css/styles/alert-blackgloss.css 只有WebKit大多支持!

github:https://github.com/goodybag/bootstrap-notify

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3