对话框/Tips

仿Twitter顶部消息提示栏插件

阿里云

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

使用方法:

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/jquery.notifyBar.css">
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/jquery.notifyBar.js"></script>

初始化插件:

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

  1. jQuery(function () {
  2.   jQuery.notifyBar({
  3.     html: "这里是消息提示栏的提示消息!",
  4.     delay: 2000,
  5.     animationSpeed: "normal"
  6.   });  
  7. });

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

  1. jQuery(function () {
  2.   jQuery.notifyBar({
  3.     html: "Hi from below!",
  4.     cssClass: "Appear at bottom",
  5.     position: "bottom"
  6.   });
  7. });

配置参数:

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

参数 类型 默认值 描述
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

仿 Twitter 顶部消息提示栏插件

已有 443 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!