jNotify:操作结果信息提示条

我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息。jNotify是一款基于jQuery的信息提示插件,它支持操作成功、操作失败和操作提醒三种信息提示方式。

jNotify具有以下特性::

  • 跨浏览器兼容。
  • 提示内容支持HTML标签。
  • 支持定位提示框的位置。
  • 灵活的,可配置插件参数。

使用前准备

使用该插件时一定要记得先载入jQuery库和该插件以及相关样式。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jNotify.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" /> 

jQuery

jNotify的使用很非常简单。

$(function(){
   $(element).click(function(){
       jSuccess(message,{option});
   });
}); 

jNotify提供三种调用方式,分别是jSuccess(),jNotify(),jError(),使用方法都一样。message就是提示信息的内容,支持html标签。option是参数配置项,可以进行相关配置,如果不要option则采用默认配置。

jNotify提供以下可配置的参数:

autoHide : true,                // 是否自动隐藏提示条
clickOverlay : false,            // 是否单击遮罩层才关闭提示条
MinWidth : 200,                    // 最小宽度
TimeShown : 1500,                 // 显示时间:毫秒
ShowTimeEffect : 200,             // 显示到页面上所需时间:毫秒
HideTimeEffect : 200,             // 从页面上消失所需时间:毫秒
LongTrip : 15,                    // 当提示条显示和隐藏时的位移
HorizontalPosition : "right",     // 水平位置:left, center, right
VerticalPosition : "bottom",     // 垂直位置:top, center, bottom
ShowOverlay : true,                // 是否显示遮罩层
ColorOverlay : "#000",            // 设置遮罩层的颜色
OpacityOverlay : 0.3,            // 设置遮罩层的透明度 

此外jNotify还提供了两个方法操作onClosed和onCompleted,使用方法可参照DEMO。

您还可以修改CSS样式来呈现提示信息条的外观。

原文链接:http://www.helloweba.com/view-blog-105.html

时间: 2024-10-12 12:07:14

jNotify:操作结果信息提示条的相关文章

Msgbox信息提示框

在程序运行过程中,常常需要弹出一些提示信息,与用户交流.需采用强制方式,将焦点移动到提示框上来,待用户处理完预先设置的对话之后,才能接着后面的操作. 这些提示框的使用都是本着协助用户更准确,更有效地与计算机交互的意义而设置的,是一个贴心的使用助手.一个有力的助手,就要能在繁杂处给予清晰的指引,在危险处提出警示,在关心的问题上及时给予回馈,在选择问题上要将不同选择的厉害关系讲明了,这样才能成为好助手.既然是协助,就又不能老在眼前晃,要在适当的时候适时地出现,出现得太多,影响效率,反而帮了倒忙.因为

delphi vcl信息提示总结

我现在使用二种信息提示的方式,一种当然是使用Application.messageBox的方式,就是即时提示. 另一种就是将所有的错误和警告写在一起,适用于大批量数据的录入,一条条提示太麻烦了. 1 即时提示 我将Application.messageBox进行了封装,MessageBox的哪些参数太多了,哪个有时间去记.封装如下: //普通提示 procedure MsgInfo(const strInfo,strTitle:String); begin Application.message

Ext信息提示对话框

Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象,用来生成各种风格的信息提示对话框,其实例对象可以通过Ext.MessageBox或Ext.Msg进行访问,使用Ext.MessageBox和使用Ext.Msg有相同的效果,而后者提供了更简短的调用方式.为了描述方便后边我们将使用Ext.MessageBox代表Ext.window.MessageBox实例对象. /** **Ext.MessageBox和Ext.Msg只是引用了Ext.wind

使用Qtip2来开发功能强大的删除和信息提示功能

在线演示1 本地下载 前面的文章中我们介绍了超棒的20款javascript工具提示条(tooltips)类库,在这篇文章中我们曾经提到过Qtip2这个强大的jQuery工具提示插件,这个jQuery插件能够帮助你快速创建强大的工具提示(tooltip)功能.如果大家使用微博的话,肯定会经常类似如下的用户信息界面,这个界面使用的就是一个工具提示功能.使用Qtip2你也可以快速开发出类似的提示功能. 在接下来的内容中,我们将创建一个博客文章阅读页面,并且提供两个“按钮”来控制“删除”和“喜欢”,界

Android SnackBar:你值得拥有的信息提示控件

概述: Snackbar提供了一个介于Toast和AlertDialog之间轻量级控件,它可以很方便的提供消息的提示和动作反馈. 有时我们想这样一种控件,我们想他可以想Toast一样显示完成便可以消失,又想在这个信息提示上进行用户反馈.写Toast没有反馈效果,写Dialog只能点击去dismiss它.是的,可能你会说是可以去自定义它们来达到这样的效果.而事实上也是这样. 实现: 其实要实现这样的一个提示窗口,只是针对自定义控件来说,应该是So easy的,不过这里我们想着会有一些比较完善的功能

ECSHOP信息提示页面的跳转时间设置

ECSHOP商城的很多操作,都会出来一个信息提示页面,告知用户的操作结果,以及请用户选择下一步要去的页面,如果用户不选择,系统将自动跳转到一个页面,那么这个跳转时间在哪控制呢?? 例如,用户登录成功后,会跳出一个信息提示页面,提示您已经登录成功,如果您没选择区哪个页面,隔一段时间它将自动跳转到一个页面. 很多人认为这个时间是在程序文件里设置的,其实不是的. 下面说一下方法 打开 文件 /themes/default/message.dwt 找到下面代码 那个数字 3 就是跳转时间,将它改成别的数

强大的响应式jQuery消息通知框和信息提示框插件

lobibox是一款功能非常强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能非常好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框可以是模态窗口,也可以不是模态窗口. 允许显示多条信息. 允许使用任何可用的CSS动画来显示和隐藏信息提示框. 信息提示框可以显示不同的颜色和图标. 可以设置为确认信息提示框. 可以设置为一行的prompt信息框.(可以使用任何HTML5的输入框类型来作为prompt) 也可以设置为多重prompt

封装表单自定义错误信息。(阻止默认错误信息提示,添加自定义错误信息提示)

1 前台提交信息到后台,两种表单验证: 2 1,form 表单验证 3 2,ajax 无刷新页面提交 4 5 表单验证方法一般有: 6 1,浏览器端验证 7 2,服务器端验证 8 3,ajax验证 9 4,浏览器和服务器双重验证 10 11 html5表单新增类型: 12 email,url,number,range,data(date,month,week,time,datetime,datetime-local),search,color,tel等 13 ======== 14 重点:pat

HTTP协议中常用状态码和含义,以及错误信息提示

转自:https://www.cnblogs.com/williamjie/p/9849996.html   https://www.cnblogs.com/omak/p/10211449.html HTTP协议状态码,是指在HTTP协议运作中由客户端发出请求连接,服务端建立连接,客户端发出HTTP请求,服务端返回响应信息,而在这个过程张由于客户端或服务端的问题会返回相应的错误代码并显示给用户,对应的错误代码表示不同的错误信息,根据这个信息用户可以调整相应的操作来修改出现的错误,最终避免错误的再