alertify.js 非常简单易用的浏览器对话框插件 - 文章教程

alertify.js 非常简单易用的浏览器对话框插件

发布于 2020-08-19 字数 4987 浏览 1312 评论 0

alertify.js 非常简单易用的浏览器对话框插件

特性

可自定义的外观

可以编辑 CSS,自定义 alertify.js 的外观以符合您的需求

轻巧,无依赖

无论项目类型如何,如果有可用的 JavaScript,都可以使用 alertify.js

通知

不打扰的通知消息可用于向用户提供反馈,甚至可以用作控制台。

跨浏览器和平台

无论您使用台式机,笔记本电脑,平板电脑还是移动设备,alertify.js 都能满足您的要求

简单的API

从使用 Alertify.js 的回调处理 OK 和 Cancel 动作到可定制的属性,非常简单

下载 alertify.js

下载0.3.11 (zip)
源代码(GitHub)

或通过bower安装

可以使用 bower 安装Alertify.js 。

$ bower install alertify.js

安装

包含 JS

<!-- ideally at the bottom of the page -->
<!-- also works in the <head> -->
<script src="PATH_TO_FILE/alertify.min.js"></script>

包含 CSS

<!-- include the core styles -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.default.css" />

默认用法

默认对话框

alertify.js 非常简单易用的浏览器对话框插件

// alert dialog
alertify.alert("Message");

// confirm dialog
alertify.confirm("Message", function (e) {
  if (e) {
    // user clicked "ok"
  } else {
    // user clicked "cancel"
  }
});

// prompt dialog
alertify.prompt("Message", function (e, str) {
  // str is the input text
  if (e) {
    // user clicked "ok"
  } else {
    // user clicked "cancel"
  }
}, "Default Value");

默认通知

alertify.js 非常简单易用的浏览器对话框插件

// standard notification
// setting the wait property to 0 will
// keep the log message until it's clicked
alertify.log("Notification", type, wait);
	
// success notification
// shorthand for alertify.log("Notification", "success");
alertify.success("Success notification");
	
// error notification
// shorthand for alertify.log("Notification", "error");
alertify.error("Error notification");

可定制的属性

// using the `set` method
alertify.set( ... );

延迟

// time (in ms) before log message hides
// default: 5000
alertify.set({ delay: 10000 });
// log will hide after 10 seconds
alertify.log("Notification");
// setting the delay to 0 will leave
// the log message until it's clicked
alertify.log("Notification", "", 0);

按钮标签

// custom OK and Cancel label
// default: OK, Cancel
alertify.set({ labels: {
    ok     : "Accept",
    cancel : "Deny"
} });
// button labels will be "Accept" and "Deny"
alertify.confirm("Message");

按钮焦点

// which button receives focus
// default: OK
alertify.set({ buttonFocus: "cancel" }); // "none", "ok", "cancel"
// focus will be given to the cancel button
alertify.confirm("Message");

按钮顺序

// 按钮的顺序
// 默认: Cancel, OK
alertify.set({ buttonReverse: true }); // true, false
// buttons order will be OK, Cancel
alertify.confirm("Message");

自定义通知

// 扩展日志方法
// 设置
alertify.custom = alertify.extend("custom");
// 使用
alertify.custom("Notification");

自定义主题

alertify.js 非常简单易用的浏览器对话框插件

// bootstrap 主题
// 使用 bootstrap 主题 CSS
// themes/alertify.bootstrap.css
alertify.prompt("message", ...);

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0