一:插件介绍
jquery.jgrowl.js用于制作消息弹出框的jQuery插件。产生效果的类似于Mac OSX系统中Growl事件通知框架。 图片展示:
兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:http://archive.plugins.jquery.com/project/jGrowl
本站JS下载:http://www.ijquery.cn/js/jgrowl/jquery.jgrowl.js
本站预览: http://www.ijquery.cn/study/demo/jgrowl
本站打包下载:http://www.ijquery.cn/study/demo/jgrowl/jgrowl.zip
二:插件作者及网址
目前暂无
三:参数说明
名称 默认值 说明
header 空 标题
sticky false 如果设置这个选项的话,你必须手动关闭提示
glue after 消息队列的方向,默认是新消息在旧消息下边显示,可选值(after,before)
position top-right 消息显示位置,top-left, top-right, bottom-left, bottom-right, center
theme default 消息提示框 classname
corners 10px 圆角半径
check 1000 检查屏幕上已过期消息的频率
life 3000 设置sticky的提示框存在周期
speed normal 开关对话动画速度 可选值(slow,normal,fast)
easing swing
closer true 是否显示一个关闭所有提示的按键
close
Template × 关闭按键的内容,样式
closer
Template <div>[ close all ]</div> 全部关闭按键的内容,样式
log function(e,m,o) {} 提示前触发(全局)的回调函数,参数 提示的dom,消息内容,这个的选项
beforeOpen function(e,m,o) {} 消息被打开前触发的回调函数,参数同上
open function(e,m,o) {} 消息被打开后触发的回调函数,参数同上
beforeClose function(e,m,o) {} 消息被关闭前触发的回调函数,参数同上
close function(e,m,o) {} 消息被关闭后触发的回调函数,参数同上
animateOpen { opacity: 'show' } 打开消息窗口的动画选项默认是:fadeOut
animateClose { opacity: 'hide' } 关闭消息窗口的动画选项默是:fadeIn
四:最简使用教程
JS和CSS引用代码:
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://www.ijquery.cn/js/jgrowl/jquery.jgrowl.js"></script> <link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/jgrowl/jquery.jgrowl.css" media="all" /> <script type="text/javascript"> $(document).ready(function(){ $.jGrowl("Hello world!"); }); </script>
HTML代码:无