jNotify漂亮的提示插件

jNotify漂亮的提示插件

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

淘建站为您提供更多_悬浮层/弹出层_弹窗_提示_jnotify,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 182 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

首先引入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

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/61.html
jNotify漂亮的提示插件 希望对你有帮助,感谢您的支持!
  • jquery带动画的确认框以及android的toast提示框

    jquery带动画的确认框以及android的toast提示框

  • jQuery右侧悬浮提示导航

    jQuery右侧悬浮提示导航

  • jquery带提示验证表单

    jquery带提示验证表单

  • jquery Tooltip简易文本提示框插件

    jquery Tooltip简易文本提示框插件

  • 实用的充值页面。带提示框!

    实用的充值页面。带提示框!

  • jquery仿新浪微博登录框autoMail自动智能邮箱提示功能

    jquery仿新浪微博登录框autoMail自动智能邮箱提示功能

  • jQuery progressbar进度条插件提示进度条进度百分比数据

    jQuery progressbar进度条插件提示进度条进度百分比数据

  • js text输入框提示火车机票网站点击文本框城市选择

    js text输入框提示火车机票网站点击文本框城市选择

  • jquery段落文字内容高亮显示提示

    jquery段落文字内容高亮显示提示

  • jquery点击搜索框文字向上浮动提示

    jquery点击搜索框文字向上浮动提示

  • jQuery右下角自动弹窗提示代码

    jQuery右下角自动弹窗提示代码

  • jQuery html图片墙鼠标悬停文字滑出提示

    jQuery html图片墙鼠标悬停文字滑出提示

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2