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

Question

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

什么是真正的通知，旨在提示用户最新的消息和警告，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