jquery-notific8是一款仿Windows8消息提示框效果的jQuery插件。它内置了多种消息提示框的主题样式，并且可以自定义自己的主题样式。它还可以设置自动关闭，显示图标，显示位置等，功能非常强大。它的特点还有：

  • 消息提示框平滑滑动显示和隐藏。
  • 可以定制消息提示框的显示时间。
  • 可以选择显示消息提示框的标题。
  • 可以使用字体图标来显示一个图标。
  • 内置多种主题，并可以通过CSS来自定义主题。
  • 可以设置消息提示框位置固定。
  • 可以设置消息提示框出现的位置。
  • 可以设置消息提示框的z-index属性。
  • 可以自定义关闭按钮的文字。
  • 可用初始化，创建和关闭回调函数。

安装

可以通过Bower或NPM来安装该消息通知框插件。

$ bower install jquery-notific8 --save
$ npm install jquery-notific8 --save

使用方法

使用该windows8消息提示框插件需要引入jQuery，jquery.notific8.min.js和jquery.notific8.css文件。

<link rel="stylesheet" href="css/jquery.notific8.css" media="screen">
<script src="dist/jquery.min.js"></script>
<script src="dist/jquery.notific8.min.js"></script>
调用消息提示框

基本使用方法：

$.notific8('消息提示框中的内容...', {
  // 消息提示框的显示时间，单位毫秒
  life: 5000, 
  // 消息提示框中的标题
  heading: '这是一个标题', 
  // 主题：teal, amethyst,ruby, tangerine, lemon, lime, ebony, smoke
  theme: 'amethyst', 
  // 是否为真固定
  sticky: true, 
  // 显示在页面的顶部还是底部
  horizontalEdge: 'bottom', 
  // 显示在页面的左边还是右边
  verticalEdge: 'left', 
  // z-index
  zindex: 1500,
  // 设置消息提示框的图标
  icon: false,
  // 关闭按钮的文本
  closeText: 'close',
  // 回调函数
  onInit: null,
  onCreate: null,
  onClose: null
});

设置消息提示框的z-index属性。

$.notific8('zindex', 1500);

销毁消息提示框。

$.notific8('destroy');

移除所有可见的消息提示框，但是不销毁实例。

$.notific8('remove');

初始化消息提示框回调函数：

$.notific8('onInit event example.', {
  onInit: function(data) {
    console.log('--onInit--');
    console.log('data:');
    console.log(data);
  }
}

创建消息提示框回调函数：

$.notific8('onCreate event example.', {
  onCreate: function(notification, data) {
    console.log('--onCreate--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  }
}

关闭消息提示框回调函数：

$.notific8('onClose event example.', {
    onClose: function(notification, data) {
    console.log('--onClose--');
    console.log('notification:');
    console.log(notification);
    console.log('data:');
    console.log(data);
  }
}

各种配置参数可以在DEMO中查看效果。