建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery高度可定制消息通知插件Notify.js

来源:易助科技网浏览量:22收藏

简介

Notify.js是一款JQuery高度可定制消息通知插件,使用简单方便,可以设置任意的元素内显示消息提示。


JQuery高度可定制消息通知插件Notify.js


(下载的附件中附有DEMO)


使用

1.  引入文件


<script src="jquery.js"></script>
<script src="notify.js"></script>


2.  HTML


<div class="boxes"></div>

//CSS
<style type="text/css">
  html {font-family: Helvetica;}
  .boxes {margin: 150px;}
  .box {border: thin solid blue;padding: 10px;margin: 20px;width: 100px;}
  .wrapper {margin-top: 50px}
</style>


3.  调用


<script class="demo">
  $.notify.defaults({autoHide: false});
  var classes = ["error", "success", "warn", "info"];
  var boxes = $(".boxes");
  $.each(classes, function(i, c) {
    var box = $("<div class=\"box\">"+c+"</div>");
    boxes.append($("<div class=\"wrapper\"/>").append(box));
    setTimeout(function() {
      box.notify(c, {className: c});
    }, 500)
  });
</script>


API 方法


$.notify( string|object, [ options ])
// string|object-通知数据
// options-选项对象或类名字符串

$.notify( element, string|object, [ options ])
// element-jQuery元素
// string|object-通知数据
// options-选项对象或类名字符串

$( selector ).notify( string|object, [ options ])
// selector-jQuery 选择器
// string|object-通知数据
// options-选项对象或类名字符串

$.notify.addStyle( styleName, styleDefinition )
// styleName-字符串(style 选项引用此名称)
// styleDefinition-样式定义对象

$.notify.defaults( options )
// options-Options对象(更新下面列出的默认值)


相关链接

GitHub 地址 :https://github.com/jpillora/notifyjs

官网地址 :  https://notifyjs.jpillora.com