很漂亮的提示框插件,代码也简洁(jNotify插件)

浏览:2942 发布日期:2015/04/22 分类:用法示例 关键字: 提示框 jNotify
jNotify是一款基于jQuery的信息提示插件,它支持操作成功、操作失败和操作提醒三种信息提示方式。


页面底部有演示、免费下载链接。若是想看更多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
评论( 相关
后面还有条评论,点击查看>>