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

发布于 2020-08-19 20:52:30 字数 4733 浏览 1555 评论 0

特性

可自定义的外观

可以编辑 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" />

默认用法

默认对话框

// 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");

默认通知

// 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");

自定义主题

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

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。