jQuery Notify bar是一款仿Twitter的简洁的页面顶部消息提示栏插件。通过该插件你可以在页面中显示各种类型的消息提示栏。也可以通过参数来自定义消息提示栏的背景和颜色等。

安装

可以通过bower来安装该消息提示栏插件。

bower install jqnotifybar

使用方法

使用该消息提示栏插件需要在页面中引入jquery.notifyBar.css和jquery，以及jquery.notifyBar.js文件。

<link rel="stylesheet" href="css/jquery.notifyBar.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.notifyBar.js"></script>
初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化一个消息提示栏组件。

jQuery(function () {
  jQuery.notifyBar({
    html: "这里是消息提示栏的提示消息！",
    delay: 2000,
    animationSpeed: "normal"
  });  
});

你也可以将消息提示栏的位置设置在页面的底部。

jQuery(function () {
  jQuery.notifyBar({
    html: "Hi from below!",
    cssClass: "Appear at bottom",
    position: "bottom"
  });
});

配置参数

该消息提示栏插件的可用配置参数有：

参数 类型 默认值 描述
html String（可选） "Your message here" 消息提示栏中的文本消息
delay Integer（可选） 2000 延迟的时间，动画时间不计在内
animationSpeed String | Integer "normal" 消息提示栏滑动显示的时间
jqObject jquery对象（可选） null 为消息提示栏自定义jquery对象
cssClass String "" 自定义的消息提示栏CSS样式，预定义的class名称有："error", "warning" 和 "success"
close Boolean false 设置为true会显示一个关闭按钮
closeText String "Close [X]" 设置关闭按钮的文本
closeOnClick Boolean true 是否点击消息提示栏时关闭它
closeOnOver Boolean false 是否在鼠标滑过消息提示栏时关闭它
waitingForClose Boolean true 是否在等待一段时间后自动关闭提示栏
onBeforeShow function null 消息提示栏显示前的回调函数
onShow function null 消息提示栏显示后的回调函数
onBeforeHide function null 消息提示栏隐藏前的回调函数
onHide function null 消息提示栏隐藏后的回调函数
position string "top" 设置消息提示栏的位置，可选位置有：top, bottom

该消息提示栏插件的github地址为：https://github.com/dknight/jQuery-Notify-bar