仿Twitter简洁的页面顶部消息提示栏插件_jQuery之家-自由分享jQuery、html5、css3的插件库

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