jNotify漂亮的提示插件

收藏

jNotify是一款基于jQuery的信息提示插件，它支持操作成功、操作失败和操作提醒三种信息提示方式。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

首先引入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相关参数