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中查看效果。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!