jNotify漂亮的提示插件

收藏

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

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

查看演示 下载资源： 108 次

加我微信，拉你进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相关参数