当前位置: 首页 > 工具软件 > Pines Notify > 使用案例 >

Pines Notify jQuery Plugin:好看易用的jQuery消息提示插件

潘自强
2023-12-01

译自: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.jsjquery.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)

博文来源:http://devwing.com/?p=67

 类似资料: