当前位置:主页 > JavsScript库 > 通知 / 提示 >

自定义Toast通知的JavaScript插件 - simple-notify
栏目分类:通知 / 提示   发布日期:2021-08-18   浏览次数:

一个简单的通知 JavaScript 插件,用于在页面上显示高度可定制的 Toast 样式警报弹出窗口。

特征:

  • 4 种内置通知类型。

  • 2个动画:滑动或淡入淡出。

  • 自动关闭与否。

  • 支持 HTML 内容。

  • 自定义图标。

  • 自定义位置。

使用:

1. 在 HTML 页面上加载 Simple Notify JavaScript 库的缩小版本。

<link rel="stylesheet" href="dist/simple-notify.min.css" />
<script src="dist/simple-notify.min.js"></script>

2. 创建基本警报通知。

new Notify ({
    title: '这是通知标题',
    text: '这是通知内容',
})

3. 创建一个 Toast 通知,在 3 秒后自动关闭。

new Notify ({
  title: '这是通知标题',    text: '这是通知内容',
    autoclose: true,
    autotimeout: 3000
})

4. 确定通知类型:‘success’, ‘error’, 或 ‘warning’.

new Notify ({
    title: '这是通知标题',
    text: '这是通知内容',
    status: 'success'
})

5. 确定您要使用的动画。默认值:“fade”。

new Notify ({
    title: '这是通知标题',
    text: '这是通知内容',
    effect: 'slide',
    speed: 300 // 动画速度
})

6. 确定是否显示图标和关闭按钮。默认值:true。

new Notify ({
    title: '这是通知标题',
    text: '这是通知内容',
    showCloseButton: false,
    showIcon: false,
})

7. 指定通知之间的空间。

new Notify ({ 
    title: '这是通知标题', 
    text: '这是通知内容', 
    gap: 20, 
    distance: 20 // 弹窗与屏幕边缘的间距
})

8. 指定通知的位置。

  • top

  • right

  • bottom

  • left

  • x-center

  • y-center

  • center

new Notify ({
    title: '这是通知标题',
    text: '这是通知内容',
    position: 'right top'
})

9. 设置您要使用的主题:

  • 1:默认:

  • 2:填充背景+深色文本

  • 3:填充背景+浅色文字

new Notify ({
    title: '这是通知标题',
    text: '这是通知内容',
    type: 2
})

10. 为通知添加自定义图标。

new Notify ({
    title: '这是通知标题',
    text: '这是通知内容',
    customIcon: '这里可以填任意 html'
})

11. 向通知添加自定义 CSS 类。

new Notify ({
    title: '这是通知标题',
    text: '这是通知内容',
    customClass: 'any class here'
})

12. 手动关闭通知。

instance.close();


官方网站:https://github.com/dgknca/simple-notify

相关热词: simple-notif通知Toast

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库