alertify.js 非常简单易用的浏览器对话框插件
特性
可自定义的外观
可以编辑 CSS，自定义 alertify.js 的外观以符合您的需求
轻巧，无依赖
无论项目类型如何，如果有可用的 JavaScript，都可以使用 alertify.js
通知
不打扰的通知消息可用于向用户提供反馈，甚至可以用作控制台。
跨浏览器和平台
无论您使用台式机，笔记本电脑，平板电脑还是移动设备，alertify.js 都能满足您的要求
简单的API
从使用 Alertify.js 的回调处理 OK 和 Cancel 动作到可定制的属性，非常简单
下载 alertify.js
或通过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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论