您的位置:首页 - 教程 - 网页特效 - 正文
jQuery信息提示条插件jNotify
效果展示

插件描述:jNotify操作结果信息提示条
jNotify具有以下特性:

跨浏览器兼容。

提示内容支持HTML标签。

支持定位提示框的位置。

灵活的,可配置插件参数。

使用前准备

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

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/82/js/jNotify.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/82/css/jNotify.jquery.css" />


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

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

评论: