by DevWing

译自：http://pines.svn.sourceforge.net/viewvc/pines/trunk/pnotify/index.html

简介

Pines Notify jQuery Plugin是Pines项目(http://sourceforge.net/projects/pines/)的一部分，由Hunter Perrin创作，用于显示消息提示框。其特点包括：

• 可定时隐藏，并带有动画效果
• 可显示必须由用户自己关闭的消息提示
• 可选的隐藏按钮
• 支持动态改变文本、标题、图标、类型…
• 允许消息提示框自由地加入到栈中
• 可以控制栈的方向以及加入到头或者尾
• 在标题和文本中支持HTML(包括表单)
• 可变的透明度
• 支持Pines图标、jQuery UI图标、任何基于CSS的图标
• 支持自定义个别消息框的样式
• 支持标准或者自定义效果
• 可选的阴影效果
• 可与jQuery UI集成
• 支持多种事件的回调函数
• 支持工具提示ToolTip
• 历史查看器，允许用户查看以前的消息提示
• 兼容XHTML 1.0 Strict标准

示例

参见http://pines.svn.sourceforge.net/viewvc/pines/trunk/pnotify/index.html， 提供了丰富的示例，可以通过其源码学习如何使用。

主题

Pines Notify jQuery Plugin使用jQuery UI CSS框架来设置自己的样式，包括颜色和背景纹理。建议使用ThemeRoller(http://jqueryui.com/themeroller /)工具来创建和下载自定义主题。

可以通过修改jquery.pnotify.default.css来更多地自定义样式，这些类包括：

• ui-pnotify
• ui-pnotify-shadow
• ui-pnotify-container
• ui-pnotify-closer
• ui-pnotify-icon
• ui-pnotify-title
• ui-pnotify-text

安装

安装很简单，只需包含jQuery 1.4和jQuery UI（如果不使用jQuery UI的效果，则只需css文件），之后包含以下文件：

jquery.pnotify.js、jquery.pnotify.default.css

源码分析及API

Hunter Perrin并未为Pines Notify jQuery Plugin编写文档，为此，DevWing分析其源码自己写了个简单的文档：

/*  * jQuery Pines Notify (pnotify) Plugin 1.0  *  * Copyright (c) 2009 Hunter Perrin  *  * Licensed (along with all of Pines) under the GNU Affero GPL:  *   http://www.gnu.org/licenses/agpl.html  */  (function($) {  ...  $.extend({   pnotify_remove_all: function () {...},  //函数：去除所有提示   pnotify_position_all: function () {...}, //函数：定位所有提示   pnotify: function(options) {...    //函数：根据options生成一个提示    pnotify.pnotify = function(options) {...}; //函数：更新提示    pnotify.pnotify_queue_position = function() {...}; //函数：将位置函数加入队列以使其不重复执行    pnotify.pnotify_display = function() {...}; //函数：显示提示    pnotify.pnotify_remove = function() {...}; //函数：去除提示    pnotify.animate_in = function(callback){...}; //函数：以动画方式显示    pnotify.animate_out = function(callback){...}; //函数：以动画方式隐藏    pnotify.pnotify_cancel_remove = function() {...}; //函数：取消所有隐藏提示的计时器    pnotify.pnotify_queue_remove = function() {...}; //函数：添加隐藏提示的计时器    ...   }  });   $.pnotify.defaults = {    /* 属性 */   pnotify_title: "",    //提示框的标题   pnotify_text: "",    //提示框的内容   pnotify_addclass: "",   //添加到提示样式上的额外class   pnotify_history: true,   //显示一个可以可拉的菜单以回显历史提示   pnotify_width: "300px",   //提示框的宽度   pnotify_min_height: "16px",  //提示框的最小高度，可以自适应   pnotify_type: "notice",   //提示框的类型，值可以为：'notice'、'error'   pnotify_notice_icon: "ui-icon ui-icon-info", //'notice'提示的图标class   pnotify_error_icon: "ui-icon ui-icon-alert", //'error'提示的图标class   pnotify_animation: "fade",  //动画类型，值可以为：'none','show','fade','slide'等jQuery原生特效或者jQuery UI中的特效，也可以用以下方式指定开始和结束时的效果：{effect_in:'show',effect_out:'slide'}   pnotify_animate_speed: "slow", //动画的播放速度   pnotify_opacity: 1,    //提示框的透明度   pnotify_shadow: false,   //是否显示阴影   pnotify_closer: true,   //是否显示关闭按钮   pnotify_hide: true,    //是否自动隐藏   pnotify_delay: 8000,   //显示时间（毫秒）   pnotify_mouse_reset: true,  //当鼠标经过时将显示时间的计时器重置   pnotify_remove: true,   //当提示框隐藏时从DOM中去除其元素   pnotify_insert_brs: true,  //将新行转换成br标记   pnotify_stack: {"dir1": "down", "dir2": "left", "push": "bottom"} //提示框显示的位置    /* 事件 */   pnotify_before_init: null,   pnotify_after_init: null,   pnotify_before_open: null,   pnotify_after_open: null,   pnotify_before_close: null,   pnotify_after_close: null,   }; })(jQuery);

使用

很简单，首先设置options，再调用：

$.pnotify(options)