Noty 页面通知

noty 可以在页面上多个位置弹出通知提示文本

官网

NOTY - a dependency-free notification library

引入插件所需 css/js 文件

  1. noty v3 并不依赖于 jQuery ,noty v2 需要依赖 jQuery
1
2
<link href="${ctx }/assets/plugins/noty/css/noty.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctx }/assets/plugins/noty/js/noty.min.js"></script>

调用插件初始化方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
new Noty({
    type: "success",
    layout: "topRight",
    theme: "sunset",
    text: "Hello World!!!",
    timeout: 3000,
    progressBar: true,
    closeWidth: ["button"],
    animation: {
        open: 'noty_effects_open',
        close: 'noty_effects_close'
    },
    id: false,
    force: false,
    killer: false,
    queue: "global",
    container: false,
    modal: false,
	  callbacks: {
		afterClose: function () { ... }
	  }
}).show();

API

  1. type : alert
    • 消息类型
    • alert_success_error_warning_info
  2. layout : topRight
    • 显示位置
    • 顶部:top_topLeft_topCenter/topRight
    • 中部:center_centerLeft_centerRight
    • 底部:bottom_bottomLeft_bottomCenter/bottomRight
  3. theme : mint
    • 主题样式
    • relax_mint_metroui_sunset_bootstrap-v3/bootstrap-v4/semanticui/nest
  4. text : “”
    • 显示文本
  5. timeout : false
    • 超时时间,默认 false 表示不超时
    • 可填写具体毫秒数,即表示超时时间为多少毫秒
  6. progressBar : true
    • 是否显示进度条
    • 只有 timeout 不为 false 时,progressBar 才有效
  7. closeWith : [‘click’]
    • 关闭方式
    • 选择 click 后将会在右上角出现一个关闭按钮
    • 选择 button 后点击文本则会关闭通知