jQuery信息提示条插件jNotify

所属分类:UI-弹出层,工具提示

 46688  351  查看评论 (12)
分享到微信朋友圈
X
jQuery信息提示条插件jNotify ie兼容8

jNotify具有以下特性:

  1. 跨浏览器兼容。

  2. 提示内容支持HTML标签。

  3. 支持定位提示框的位置。

  4. 灵活的,可配置插件参数。

使用前准备

使用该插件时一定要记得先载入jQuery库和该插件以及相关样式。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jNotify.jquery.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" />

jQuery

jNotify的使用很非常简单。

$(function(){ 
   $(element).click(function(){ 
       jSuccess(message,{option}); 
   });   
});

jNotify提供三种调用方式,分别是jSuccess(),jNotify(),jError(),使用方法都一样。message就是提示信息的内容,支持html标签。option是参数配置项,可以进行相关配置,如果不要option则采用默认配置。

jNotify提供以下可配置的参数:

autoHide : true,                // 是否自动隐藏提示条 
clickOverlay : false,            // 是否单击遮罩层才关闭提示条 
MinWidth : 200,                // 最小宽度 
TimeShown : 1500,               // 显示时间:毫秒 
ShowTimeEffect : 200,            // 显示到页面上所需时间:毫秒 
HideTimeEffect : 200,            // 从页面上消失所需时间:毫秒 
LongTrip : 15,                 // 当提示条显示和隐藏时的位移 
HorizontalPosition : "right",        // 水平位置:left, center, right 
VerticalPosition : "bottom",         // 垂直位置:top, center, bottom 
ShowOverlay : true,              // 是否显示遮罩层 
ColorOverlay : "#000",            // 设置遮罩层的颜色 
OpacityOverlay : 0.3,            // 设置遮罩层的透明度

此外jNotify还提供了两个方法操作onClosed和onCompleted

您还可以修改CSS样式来呈现提示信息条的外观。


相关插件-弹出层,工具提示

jQuery弹出层插件gallery

这是一个图片弹出层
  弹出层
 39075  348

jquery弹出框插件dialogbox

jquery弹出框插件dialogbox
  弹出层
 54041  317

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 52586  398

jQuery弹出层插件

可无限次弹出,自己设置大小,手动调整大小都可(相比于layer.js要轻量)
  弹出层
 39554  318

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    叉叉米 0
    2019/4/2 16:07:25
    这怎么样呀?看着好像还不错呀 回复
    he 0
    2018/6/8 17:01:57
    这么垃圾还要b
        记得回来0
        2018/12/14 11:36:47
        为什么
    回复
    小丶邱 0
    2017/3/9 13:58:33
    yejiong 0
    2016/12/21 10:12:02
    芍? 0
    2016/12/4 19:12:11
    给1jq币吧
        弥敦道和墨尔本0
        2018/12/3 16:21:06
        me too
    回复
    菩提心子。 0
    2016/10/28 10:10:00
    那个宽度怎让它随着文字的多少来改变呀??而且让弹出框水平垂直都居中 回复
    菩提心子。 0
    2016/10/26 16:10:04
    可以把引入的jquery改成zepto吗? 回复
    茶凉。 0
    2016/8/26 14:08:15
    嘿..呀┶磊.. 0
    2015/12/17 17:12:17

    工具很不错,很适合bootstrap响应式后台。

    回复
    leejersey 0
    2015/11/20 17:11:01
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复