快速开始

通过 RawGit

<-- 标准版 -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>

<-- angular模块 -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/ngAlertify.js"></script>

通过 Bower

bower install --save alertifyjs

通过 NPM

npm install --save alertifyjs

禁用默认 CSS

如果不想使用默认的CSS,只需要在引入javascript文件之前插入自己的样式文件(任意id="alertifyCSS"stylelink 元素):

<link rel="stylesheet" href="/path/to/custom/styles.css" id="alertifyCSS">
<script src="/path/to/alertify.js"></script>

注意

我们会在主要的CDN上发布最新版本,在此之前,您也可以在GitHub上下载,或者通过NPM或Bower进行安装。

如果您通过Bower或NPM进行安装,则需要在HTML中引入“dist”文件夹中的文件,以便插件能正常使用。

还需要注意的是,CSS默认是JS动态生成的,不需要通过单独引入样式文件的方式来使用主题。由于CSS会被JS插入到<link>元素或<style>元素的前面,所以您也可以使用自己的样式来覆盖它。

Angular JS

此插件也有AngularJS的版本。它的名称是“ngAlertify.js”,如果您正在构建AngularJS应用的话可以考虑使用它。

如果您想查看通过ngAlertify实现日志消息的在线示例, 请点击这里

初始化 ngAlertify

// 请确保已经引入了ngAlertify.js文件
angular
    .module("myApp", ["ngAlertify"])
    .controller("myController", function($scope, alertify) {
        alertify.success("欢迎使用alertify!");
    });

性能

Alertify是基于高性能,轻量级的原则来设计的(这也就意味着它不像其他插件那样有丰富的功能,我们也不打算增加更多的功能,实际上这也是我们的初衷),所以对于各种网站和用户来说,它是一个不错的选择。

目前,整个库的JavaScript和CSS只有2.29KB(gzip压缩后),并且以后会越来越小。考虑到它仅有一个HTTP请求,且不需要其他依赖,所以更值得选择。

Angular模块只有2.32KB,所以也很轻量级!

使用方法

对话框

Alert 对话框

对话框显示文本,需要用户知晓消息内容

代码示例

alertify.alert("消息");

Confirm 对话框

代码示例

// confirm 对话框
alertify.confirm("消息", function () {
    // 用户点击"ok"按钮
}, function() {
    // 用户点击"cancel"按钮
});

Prompt 对话框

代码示例

alertify
  .defaultValue("默认值")
  .prompt("这是一个Prompt对话框",
    function (val, ev) {

      // The click event is in the event variable, so you can use it here.
      ev.preventDefault();

      // The value entered is availble in the val variable.
      alertify.success("您单击了OK,类型为:" + val);

    }, function(ev) {

      // The click event is in the event variable, so you can use it here.
      ev.preventDefault();

      alertify.error("您单击了Cancel");

    });

自定义标签

您也可以轻松设定自己的按钮标签(文字),并不一定要使用"Ok"和"Cancel"。

代码示例

alertify
  .okBtn("同意")
  .cancelBtn("拒绝")
  .confirm("自定义按钮标签的Confirm对话框", function (ev) {

      // The click event is in the
      // event variable, so you can use
      // it here.
      ev.preventDefault();
      alertify.success("您单击了OK");

  }, function(ev) {

      // The click event is in the
      // event variable, so you can use
      // it here.
      ev.preventDefault();

      alertify.error("您单击了Cancel");

  });

Ajax - 多个对话框

代码示例

alertify.confirm("确认?", function (ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();

    alertify.alert("AJAX成功以后OK");


}, function(ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();

    alertify.alert("AJAX成功以后Cancel");

});

Promise Aware

如果您的浏览器支持promises,您可以使用它们来代替回调函数

代码示例

 if ("function" !== typeof Promise) {
      alertify.alert("您的浏览器不支持promises");
      return;
  }

  alertify.confirm("确认?").then(function (resolvedValue) {
      // "resolvedValue" is an object with the following keys:
      // buttonClicked
      // inputValue (only for prompts)
      // event

      // The click event is in
      // resolvedValue, so you can use
      // it here.
      resolvedValue.event.preventDefault();
      alertify.alert("您单击了" + resolvedValue.buttonClicked + "按钮!");
  });

日志消息

位置设置

代码示例

alertify.delay(1000); // 快速的显示
alertify.log("默认在左下角的位置显示");
setTimeout(function() {
    alertify.logPosition("左上角");
    alertify.log("左上角");
}, 1500);
setTimeout(function() {
    alertify.logPosition("右上角");
    alertify.log("右上角");
}, 3000);
setTimeout(function() {
    alertify.logPosition("右下角");
    alertify.log("右下角");
}, 4500);
setTimeout(function() {
    alertify.reset(); // 重置
    alertify.log("默认位置");
}, 6000);

设置父元素

可以设置一个父元素,将Alertify添加到该DOM节点中

代码示例

// Alertify 默认被添加在document.body中。
// 您可以轻松改变它,比如:
var elem = document.getElementById("my-element");
alertify.parent(elem);

标准日志

代码示例

alertify.log("标准日志消息");

带HTML的标准日志

HTML片段也可以在日志消息正常显示

代码示例

var msg = "<img src='https://placehold.it/256x128'>" +
          "<h3>这里是HTML内容</h3>" +
          "<p>看起来不错,不是吗?</p>";
alertify.log(msg);

带回调函数标准日志

请注意,设置了回调函数以后,单击日志消息并不会自动关闭,这与之前有所不同。这也就意味着如果用户多次点击,会多次调用回调函数。如果您的回调函数只能执行一次,那么您需要分开跟踪回调函数(If you're callback is an action that must be completed only once, you'll need to keep track of that separately)。

代码示例

alertify.log("带回调函数标准日志消息", function(ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();

    alertify.log("您单击了通知");

});

成功日志

代码示例

alertify.success("成功日志消息");

带回调函数的成功日志

代码示例

alertify.success("带回调函数的成功日志消息", function(ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();

    alertify.success("您单击了通知");

});

错误日志

代码示例

alertify.error("错误日志消息");

带回调函数的错误日志

代码示例

alertify.error("带回调函数的错误日志消息", function(ev) {

    // The click event is in the
    // event variable, so you can use
    // it here.
    ev.preventDefault();
    alertify.error("您单击了通知");

});

单击关闭日志

代码示例

alertify
  .closeLogOnClick(true)
  .log("单击关闭");

禁用日志的click事件

默认情况下,单击关闭日志消息功能是被禁用的,但如果您已经启用了它,并需要将其重置为禁用的话,也是非常方便的。

为什么默认要禁用单击关闭呢,主要是为了日志消息中所包含的HTML(包括链接)能被操作。

代码示例

alertify
  .closeLogOnClick(true)
  .log("单击关闭")
  .closeLogOnClick(false)
  .log("不能通过单击关闭");

10 秒后隐藏

代码示例

alertify.delay(10000).log("10秒后隐藏");

持续显示的日志

持续显示日志消息一直可见,直到单击(如果设置了closeLogOnClick(true)),或者当消息数量超过maxLogItems设置时移除。

代码示例

alertify.delay(0).log("一直显示直到被单击");

日志消息最大数量

您可以设置日志/成功/错误消息的最大显示数量,默认为两个。

代码示例

alertify
  .maxLogItems(1)
  .log("这是第一个消息");

// The timeout is just for visual effect.
setTimeout(function() {
  alertify.log("第二条消息显示会关闭第一条消息");
}, 1000);

设置日志模板

可以为所有的日志设置模板

代码示例

alertify
  .setLogTemplate(function (input) { return '日志消息:' + input; })
  .log("这是一条消息");

其他配置项

重置默认值

您可以改变按钮标签、延时、默认提示或者占位符等的值,同时也可以轻松重置为默认值。

代码示例

// Notice the okay button is not the custom value, it was reset.
alertify
  .okBtn("前往")
  .reset()
  .alert("自定义值已被重置!");

---- 最后更新于:2017/06/19 01:26