jQuery |警报插件

jQuery 框架提供了alertify.js插件，该插件提供预先设计的可定制通知系统以及交互式浏览器对话框。这个可扩展和主题化的插件对于开发人员提供具有堆叠功能的优化版本的警报消息非常有用。
这个小型图书馆系统有效地显示确认弹出窗口、成功或错误警报和带有排队对话框的提示消息，可广泛用于调试过程。

请下载库并根据项目要求包含所需的文件。

示例 1：易于理解、自定义和在您的代码中实现。它不依赖于任何第三方库，但很容易与它们集成。以下代码演示了具有堆叠功能的漂亮对话框。

  

    
    
    jQuery Alertify Plugin
    
    
  
    
    
  
    
  
    
        .alertify-log-custom {
            background: green;
        }
  
        .height {
            height: 10px;
        }
    

  

    GeeksforGeeks
     jQuery Alertify Plugin
    
  
    Alertify Dialogs
    
    Click Alert Dialog
    Click Prompt Dialog
    Click Confirm Dialog
    Click Button Focus
    Click Custom Labels
    Click Button Order
  
  
    
        function reset() {
            $("#linkID").attr("href", "alertify.default.css");
            alertify.set({
                labels: {
                    ok: "OK",
                    cancel: "Cancel"
                },
                delay: 4000,
                buttonFocus: "ok",
                buttonReverse: false
  
            });
        }
  
        // Alertify Standard Dialog boxes
        $("#alertID").on('click', function () {
            reset();
            alertify.alert("Welcome GFG !");
            alertify.alert("Alertify alert dialog");
            return false;
        });
  
        $("#confirmID").on('click', function () {
            reset();
            alertify.confirm(
                "Please confirm the dialog box ", function (event) {
                    if (event) {
                        alertify.success(
                            "You have clicked OK to confirm our"
                            + " terms and conditions.");
                    } else {
                        alertify.error(
                            "You have clicked Cancel not to confirm.");
                    }
                });
            return false;
        });
  
        $("#promptID").on('click', function () {
            reset();
            alertify.prompt(
                "This is a prompt dialog box", function (event, strng) {
                    if (event) {
                        alertify.success(
                            "You have clicked OK and typed: " + strng);
                    } else {
                        alertify.error(
                            "You have clicked Cancel");
                    }
                }, "Please enter, this is default value");
            return false;
        });
  
  
        $("#success").on('click', function () {
            reset();
            alertify.success("Success message");
            return false;
        });
  
        $("#error").on('click', function () {
            reset();
            alertify.error("Error message");
            return false;
        });
  
  
        $("#labelsID").on('click', function () {
            reset();
            alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
            alertify.confirm(
                "Confirm dialog with custom button labels",
                function (event) {
                    if (event) {
                        alertify.success("You have clicked OK");
                    } else {
                        alertify.error("You have clicked Cancel");
                    }
                });
            return false;
        });
  
        $("#focusID").on('click', function () {
            reset();
            alertify.set({ buttonFocus: "cancel" });
            alertify.confirm(
                "Confirm dialog with cancel button focused",
                function (event) {
                    if (event) {
                        alertify.success("You have clicked OK");
                    } else {
                        alertify.error("You have clicked Cancel");
                    }
                });
            return false;
        });
  
        $("#orderID").on('click', function () {
            reset();
            alertify.set({ buttonReverse: true });
            alertify.confirm(
                "Confirm dialog with reversed button order",
                function (event) {
                    if (event) {
                        alertify.success("You have clicked OK");
                    } else {
                        alertify.error("You have clicked Cancel");
                    }
                });
            return false;
        });
    

  

输出：

示例 2：以下代码演示了如何使用来自alertify.js插件的日志消息。

  

    
    
    jQuery Alertify Plugin
    
    
  
  
    
    
    
  
    
        .alertify-log-custom {
            background: green;
        }
  
        .height {
            height: 10px;
        }
    

  

    GeeksforGeeks
     jQuery Alertify Plugin
     
  
    Alertify Logs
     
  
    Standard Log
    Success Log
    Error Log
    Custom Log
    Hide in 9 seconds
    Persistent Log
  
    
        function reset() {
            $("#linkID").attr("href", "alertify.default.css");
            alertify.set({
                labels: {
                    ok: "OK",
                    cancel: "Cancel"
                },
                delay: 4000,
                buttonFocus: "ok",
                buttonReverse: false
  
            });
        }
  
        $("#notificationID").on('click', function () {
            reset();
            alertify.log("Standard log message");
            return false;
        });
  
        $("#successID").on('click', function () {
            reset();
            alertify.success("Success log message");
            return false;
        });
  
        $("#errorID").on('click', function () {
            reset();
            alertify.error("Error log message");
            return false;
        });
  
        // Custom Properties
        $("#delayID").on('click', function () {
            reset();
            alertify.set({ delay: 9000 });
            alertify.log("Hiding in 9 seconds");
            return false;
        });
  
        $("#foreverID").on('click', function () {
            reset();
            alertify.log("It will stay until clicked", "", 0);
            return false;
        });
  
        // Custom Log message
        $("#customID").on('click', function () {
            reset();
            alertify.custom = alertify.extend("custom");
            alertify.custom("Its a custom log message");
            return false;
        });
    

  

输出：

示例 3：以下代码演示了如何使用代码中所示的通知消息实现可主题化的对话框并进行 ajax 调用。

  

    
    
    jQuery Alertify Plugin
    
    
  
  
    
    
    
  
    
        .alertify-log-custom {
            background: green;
        }
  
        .height {
            height: 10px;
        }
    

  

    GeeksforGeeks
     jQuery Alertify Plugin
     
  
    Ajax Multiple Dialogs
     
    
        Ajax with Multiple Dialog
     
  
    Custom Bootstrap Themes
     
    Bootstrap Theme
  
    
        function reset() {
            $("#linkID").attr("href", "alertify.default.css");
            alertify.set({
                labels: {
                    ok: "OK",
                    cancel: "Cancel"
                },
                delay: 4000,
                buttonFocus: "ok",
                buttonReverse: false
  
            });
        }
  
        // Ajax call
        $("#ajax").on("click", function () {
            reset();
            alertify.confirm("Confirm?", function (event) {
                if (event) {
                    alertify.alert("Successful Ajax call after OK");
                } else {
                    alertify.alert("Successful Ajax call after Cancel");
                }
            });
        });
  
        // Custom Themes
        $("#bootstrap").on('click', function () {
            reset();
            $("#linkID").attr("href", "alertify.bootstrap.css");
            alertify.prompt(
                "It prompts dialog with bootstrap theme", 
                    function (event) {
                    if (event) {
                        alertify.success("You have clicked OK");
                    } else {
                        alertify.error("You have clicked Cancel");
                    }
                }, "This is Default Value");
            return false;
        });
  
    
  

  

输出：