码迷,mamicode.com
首页 > 其他好文 > 详细

jNotify:操作结果信息提示条

时间:2015-09-23 16:26:30      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

我们在提交表单后,通过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:操作结果信息提示条

标签:

原文地址:http://www.cnblogs.com/xiaoshi657/p/4832494.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!