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

功能丰富的Web通知库 – AST-Notif
栏目分类:通知 / 提示   发布日期:2021-09-24   浏览次数:

AST-Notif 是一个简单但功能丰富的通知库,用于在网络上创建警报对话框、Microsoft 风格的咆哮通知和 Android Material 风格的吐司和小吃店。

使用:

1. 将样式表ast-notif.css和 JavaScriptast-notif.js放在 HTML 页面上。

<link rel="stylesheet" href="css/ast-notif.css" />
<script src="js/ast-notif.js"></script>

2. 创建一个具有AstNotif.dialog()功能的警报对话框。可能的参数:

  • title标题

  • message消息

  • options选项对象,见下文

  • callbackOK:回调函数callbackCancel:回调函数

// AstNotif.dialog(title: string, message: string, options[optional]: object, callbackOK: function, callbackCancel: function);
AstNotif.dialog('Alert Title', 'Alert Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default'
  theme: 'default',
  bgheadcolor: THEMES.DEFAULT.bgcolor,
  bgbodycolor: "white",
  bgfootercolor: "white",
  color: THEMES.DEFAULT.color,
  //有图标吗?
  icon: true,
  // 自定义图标图片
  imgIcon: getCurrentPath().split('/').slice(0, -1).join('/') +'/' + "../img/error_hitam_garis.png",
  // 图标大小
  iconSize: "48px",
  // 确定按键内容
  positive: "OK",
  // 取消按键内容
  negative: "Cancel",
  // 没有 "fa-" 的字体真棒类
  fa: "",
  // 是否可以关闭?
  dismissible: true
});

3. 创建一个具有AstNotif.poster()功能的海报对话框。

  • message消息

  • options选项对象,见下文

  • callbackOK:回调函数

  • callbackCancel:回调函数

// AstNotif.poster(message: string, options[optional]: object, callbackOK: function, callbackCancel: function);
AstNotif.dialog('Alert Title', 'Alert Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default'
  theme: 'default',
  bgcolor: "#02BAF2",
  color: THEMES.DEFAULT.color,
  // 有图标吗?
  icon: true,
  // 自定义图标图片
  imgIcon: "/path/to/icon.png",
  // 图标大小
  iconSize: "48px",
  // 确定按键内容
  positive: "OK",
  // 取消按键内容
  negative: "Cancel",
  // 没有 "fa-" 的字体真棒类
  fa: "",
  // 是否可以关闭?
  dismissible: true
});

4. 创建一个带有AstNotif.toast()功能的Android启发的toast消息。

// AstNotif.toast(message: string, options[optional]: object);
AstNotif.toast('Toast Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default' 
  theme: 'default',
  // 时间长度,或者不管它叫什么,直到祝酒辞结束。
  length: 2000,
  // 背景和文本颜色
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // 反色
  reverseColor: false,
  // 透明度
  alpha: 1,
  // 边界半径
  borderRadius: 10,
  // 底部位置,顶部位置为负
  vdist: 10,
  // 左位
  hdist: 10,
  // 边缘
  margin: 10,
  // 位置(基点)
  position: "s",
  // 关卡效果*特效
  lebayify: 0
});

5. 创建一个具有AstNotif.snackbar()功能的 Android 风格的小吃店。

AstNotif.snackbar(message: string, options[optional]: object, action/callback: function);
AstNotif.snackbar('Snackbar Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default' 
  theme: 'default',
  // 小吃位置,顶部或底部。
  position: "bottom",
  // 时间长度,或者不管它叫什么,直到零食吃完。
  length: 2000,
  // 背景和文本颜色
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // 按钮颜色
  btncolor: THEMES.DEFAULT.btncolor,
  // 反色
  reverseColor: false,
  // 没有“fa-”的字体类
  fa: "",
  button: "",
  // 关卡效果*特效
  lebayify: 0
});


6.创建一个微软Windows风格的带有AstNotif.notify()功能的咆哮通知。

AstNotif.notify(title: string, message: string, footer: string, options[optional]: object, callback: function);
AstNotif.notify('Notify Title', 'Notify Message', {
  // 背景和文字颜色
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // 使用图标吗?
  icon: true,
  // 自定义图标图片
  imgIcon: getCurrentPath().split('/').slice(0, -1).join('/') +'/' + "../img/error_putih_garis.png",
  // 字体真棒,请把“fa-”从论点中去掉
  fa: "",
  // 通知对象的长度,-1表示永久停留
  length: 2000,
  // 透明度
  alpha: 0.8,
  // 关卡效果*特效
  lebayify: 0,
  // 位置
  position: "right"
});


官方网站:https://github.com/anandastoon/AST-Notif

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