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

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", ...);

相关链接

  • 官网:http://fabien-d.github.io/alertify.js/

以上是 alertify.js 非常简单易用的浏览器对话框插件 的全部内容, 来源链接: www.h5w3.com/232666.html

回到顶部