我们在提交表单后,通过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

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

  1. dede操作成功信息提示修改

    函数修改 include/common.func.php 文件 function ShowMsg()函数

  2. jQuery信息提示工具jquery.poshytip (转载)

    转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...

  3. JS/CSS 各种操作信息提示效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HubSpot – 网站开发必备的 jQuery 信息提示库

    HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...

  5. IIS 之 HTTP错误信息提示

    一.HTTP返回码 [1]1xx - 信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应. a. 100 - 继续. b. 101 - 切换协议. [2 ...

  6. Ext信息提示对话框

    Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象,用来生成各种风格的信息提示对话框,其实例对象可以通过Ext.MessageBox或Ext.Msg ...

  7. 44. Ext信息提示对话框

    转自:https://www.cnblogs.com/glsqh/p/5920500.html Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象, ...

  8. 仿网易邮箱5.0(四):信息提示插件(tips.js)

    信息提示插件,在平常的开发中也是经常乃至的一个插件,像是一些辅助信息的提示,如:加载成功.提交信息成功或失败等等.这个插件在163邮箱中用在切换标签时提示加载状态. 下面我们先来分析一下这个小插件需要 ...

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

    lobibox是一款功能很强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能很好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框能够 ...

随机推荐

  1. 第二十九篇:使用SOUI的SMCListView控件

    列表控件是客户端应用最常用的控件之一.列表控件通常只负责显示数据,最多通知一下APP列表行的选中状态变化. 现在的UI经常要求程序猿在列表控件里不光显示内容,还要能和用户交互,显示动画等等,传统的列表 ...

  2. NOI 2010 海拔 ——平面图转对偶图

    [题目分析] 可以知道,所有的海拔是0或1 最小割转最短路,就可以啦 SPFA被卡,只能换DIJ [代码] #include <cstdio> #include <cstring&g ...

  3. table居中

    - -bcenter标签已经被淘汰了让一个容器水平居中,可以使用css控制 body { text-align:center; } table { margin:0px auto; }

  4. Objective-C 中self.与_访问方式的区别

    Objective-C中属性self.a与_a访问的区别: 在OC中我们可以通过指令@property定义属性. OC对属性封装了许多方法,同时也会自动实现一些方法,相比实例变量,感觉更加面向对象些. ...

  5. Python for Infomatics 第13章 网页服务一(译)

    注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 一旦利用程序通过HTTP协议获得 ...

  6. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  7. ZeroMQ接口函数之 :zmq_getsockopt – 获取ZMQ socket的属性

    ZeroMQ API 目录 :http://www.cnblogs.com/fengbohello/p/4230135.html 本文地址 :http://www.cnblogs.com/fengbo ...

  8. <九>JDBC_获取插入记录的主键值

  9. *HDU3486 RMQ+二分

    Interviewe Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  10. *HDU1053 哈夫曼编码

    Entropy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...