Pines Notify jQuery Plugin:好看易用的jQuery消息提示插件
2010-04-08 19:45
696 查看
译自:http://pines.svn.sourceforge.net/viewvc/pines/trunk/pnotify/index.html
可定时隐藏,并带有动画效果
可显示必须由用户自己关闭的消息提示
可选的隐藏按钮
支持动态改变文本、标题、图标、类型…
允许消息提示框自由地加入到栈中
可以控制栈的方向以及加入到头或者尾
在标题和文本中支持HTML(包括表单)
可变的透明度
支持Pines图标、jQuery UI图标、任何基于CSS的图标
支持自定义个别消息框的样式
支持标准或者自定义效果
可选的阴影效果
可与jQuery UI集成
支持多种事件的回调函数
支持工具提示ToolTip
历史查看器,允许用户查看以前的消息提示
兼容XHTML 1.0 Strict标准
可以通过修改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.pnotify.js、jquery.pnotify.default.css
博文来源:http://devwing.com/?p=67
简介
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)
博文来源:http://devwing.com/?p=67
相关文章推荐
- Pines Notify jQuery Plugin:好看易用的jQuery消息提示插件
- Pines Notify jQuery Plugin:好看易用的jQuery消息提示插件
- jQuery消息提示框插件
- wap jquery消息提示小插件
- jQuery Validation Plugin 1.11.1 插件自定义错误信息提示位置
- 一个超棒的消息提示jQuery插件 - Noty
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)
- 基于jQuery的消息提示插件 DivAlert之旅(二)
- 强大的响应式jQuery消息通知框和信息提示框插件
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)
- 超强1000个jquery极品插件!(2.消息提示类)
- jQuery消息提示框插件Tipso
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)
- Jquery消息提示插件toastr使用详解
- 【jQuery插件】capacityFixed-类似于新浪微博新消息提示的定位框
- Jquery消息提示插件toastr使用详解
- 流行的jQuery信息提示插件(jQuery Tooltip Plugin)
- Notify - 基于jquery的消息通知插件
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)