
页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。
1、
首先引入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" />
2、
本文展示了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>
3、
调用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'
});
}
});
}
});
});
});查看该特效演示及免费下载,请访问【素材火】: http://www.sucaihuo.com/js/61.html 