jNotify是一款基于jQuery的信息提示插件,它支持操作成功、操作失败和操作提醒三种信息提示方式。
淘建站为您提供更多_悬浮层/弹出层_弹窗_提示_jnotify,在此特别感谢您对我们的支持与厚爱!
演示不了,点击反馈
下载 182 次
觉得不错,可打赏下作者
免费共享
首先引入jQuery库和jNotify插件:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jNotify.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" />HTML
本文展示了4个DEMO,HTML排版如下:
<p><a href="#" class="success">1、操作成功!</a></p>
<p><a href="#" class="notice">2、操作提醒!</a></p>
<p><a href="#" class="error">3、操作失败!</a></p><br />
<p><a href="#" class="three">4、操作成功,提醒和失败!!</a></p>jQuery
调用jNotify非常简单,代码如下:
$(function() {
$("a.success").click(function() {
jSuccess("恭喜,操作成功! + <strong>10</strong> 金币!", {
VerticalPosition: 'center',
HorizontalPosition: 'center'
});
});
$("a.notice").click(function() {
jNotify("注意:请完善你的<strong>个人资料!</strong>");
});
$("a.error").click(function() {
jError("操作失败,请重试!!");
});
$("a.three").click(function() {
jSuccess("操作成功,2秒后显示下一个提示框!!", {
TimeShown: 2000,
onClosed: function() {
jNotify("注意:点击这里显示下一个提示框", {
VerticalPosition: 'top',
autoHide: false,
onClosed: function() {
jError("出错啦! 演示结束,<br /> 请点击背景层关闭提示框。", {
clickOverlay: true,
autoHide: false,
HorizontalPosition: 'left'
});
}
});
}
});
});
});jNotify相关参数
| 参数 | 描述 | 默认值 |
| autoHide | 是否自动隐藏提示条 | true |
| clickOverlay | 是否单击遮罩层才关闭提示条 | false |
| MinWidth | 最小宽度 | 200 |
| TimeShown | 显示时间:毫秒 | 1500 |
| ShowTimeEffect | 显示到页面上所需时间:毫秒 | 200 |
| HideTimeEffect | 从页面上消失所需时间:毫秒 | 200 |
| LongTrip | 当提示条显示和隐藏时的位移 | 15 |
| HorizontalPosition | 水平位置:left, center, right | right |
| VerticalPosition | 垂直位置:top, center, bottom | bottom |
| ShowOverlay | 是否显示遮罩层 | true |
| ColorOverlay | 设置遮罩层的颜色 | #000 |
| OpacityOverlay | 设置遮罩层的透明度 | 0.3 |

