jQuery提示插件alertify使用指南

简介

alertify是一款基于jQuery的小型提示插件，支持多种提示消息类型，适合用于网站的提示和交互操作。它能够为用户提供极好的用户体验，并且易于使用，代码简单、轻量。

安装alertify

要使用alertify，在HTML中添加以下内容：

<!--alertify css文件-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/alertifyjs/1.10.0/css/alertify.min.css">

<!--alertify js文件-->
<script src="https://cdn.jsdelivr.net/alertifyjs/1.10.0/alertify.min.js"></script>

使用alertify

alertify最常用的方法是调用 alertify.alert() 方法。它带有三个参数：

alertify.alert( message, [title, closeButtonLabel]);

• message: 提示消息内容。
• title: 提示消息标题，如果没有则为空。
• closeButtonLabel: 关闭按钮的文本标签。

示例1： 使用alert()进行简单提示:

alertify.alert('消息提示内容！');

可以看到，在alert()方法中传入提示的内容，alertify自动将其显示在屏幕中心。同样的，可以添加标题和自定义按钮标签：

示例2： 使用alert()方法添加标题和自定义按钮标签

alertify.alert('消息内容', '消息标题', '确认');

alertify支持的其他方法

除了alertify.alert()方法，还有一些其他方法，列举如下：

confirm

这是一个带有确认和取消按钮的对话框，您可以使用以下方法调用它：

alertify.confirm( message, function(event){}, function(event){} )

示例3： 使用confirm()方法示例

alertify.confirm("确认删除该内容吗？", function(event){
    alertify.success('删除成功!');
}, function(event){
    alertify.error('取消删除！');
});

此示例中，alertify在确认删除的情况下将显示成功消息，而在取消删除的情况下将显示错误消息。

prompt

此方法带有文本输入框，用户可以在输入框中输入，如下所示：

alertify.prompt( message, function(event, value){}, function(event){} )

示例4： 使用prompt()方法示例

alertify.prompt("请输入您的名字：", function(e, str) {
    if (e) {
        alertify.success("您输入的名字是: " + str);
    } else {
        alertify.error("您取消了输入！");
    }
});

此示例中，alertify将显示一个对话框，其中要求您输入您的名字。如果您点击了“确定”按钮，则alertify会显示成功消息并显示您输入的名称。如果您点击了“取消”按钮，则alertify会显示错误消息，表示您取消了输入。

log

此方法用于显示日志消息，这些消息可以是各种不同类型的消息，如成功、失败、警告等。

alertify.log( message, type, wait );

• message: 提示消息内容
• type: 消息类型，如success、error、warning
• wait: 消息显示的时间（毫秒），默认5000毫秒（5秒）

示例5： 使用log()方法展示一个success消息

alertify.log("保存成功！", "success", 1500);

这将在页面顶部显示一个绿色的“成功”消息，该消息将在1.5秒后自动关闭。

结语

alertify是一个非常实用的 jQuery 插件，通过其提供的方法，可以轻松地优化网站用户体验，提高用户与网站的互动性。以上就是alertify使用指南的完整攻略，希望对大家有所帮助。