jQuery)扩展jQuery系列之一 模拟alert，confirm（一）

下面我将详细讲解如何使用jQuery扩展实现模拟alert和confirm功能。

什么是jQuery扩展

在开发过程中，我们常常需要使用一些常用的功能，例如模拟弹出框，实现图片轮播等，这些功能都可以通过jQuery扩展来实现。

jQuery扩展是一个非常重要的功能，它可以让我们直接在jQuery中添加自己的方法，以实现自定义的功能。在jQuery中，每个扩展都是以插件的形式存在，可以通过$.fn来定义和使用插件。

模拟alert和confirm

在网页开发中，我们经常需要进行一些用户交互，例如提示用户确认操作或提示用户信息等。其中最常见的就是alert弹出框和confirm弹出框。下面将介绍如何使用jQuery扩展实现这两种弹出框。

实现alert弹出框

先看下面的示例代码：

$.alert = function(message) {
    alertBox(message);
};

function alertBox(message) {
    // 创建弹出框
    var $alert = $("<div class='alert'></div>");
    var $message = $("<div class='message'></div>").text(message);
    var $close = $("<span class='close'>×</span>");

    // 添加内容
    $alert.append($message);
    $alert.append($close);

    // 显示弹出框
    $("body").append($alert);

    // 绑定关闭事件
    $close.on("click", function() {
        $alert.remove();
    });
}

首先定义了一个$.alert方法，这个方法接受一个参数message，表示要显示的消息内容。在这个方法中，我们调用了alertBox方法，它的作用是创建一个弹出框。

alertBox方法中，我们首先创建了一个div元素，这是整个弹出框的主体。然后创建了一个message元素，表示要显示的消息内容，以及一个close元素，表示关闭按钮。

接着，我们把message和close元素添加到$alert中，并把$alert添加到页面中。最后绑定close元素的click事件，当用户点击关闭按钮时，移除$alert元素，弹出框就消失了。

了解了上述代码之后，我们就可以在页面中使用$.alert方法来调用这个弹出框了：

$.alert("这是一个消息提示");

实现confirm弹出框

confirm弹出框的实现方式和alert弹出框类似，只是在弹出框中需要提供确认和取消按钮，还需要区分用户选择的是确认还是取消。

下面是示例代码：

$.confirm = function(message, okCallback, cancelCallback) {
    confirmBox(message, okCallback, cancelCallback);
};

function confirmBox(message, okCallback, cancelCallback) {
    // 创建弹出框
    var $confirm = $("<div class='confirm'></div>");
    var $message = $("<div class='message'></div>").text(message);
    var $ok = $("<button class='ok'>确认</button>");
    var $cancel = $("<button class='cancel'>取消</button>");

    // 添加内容
    $confirm.append($message);
    $confirm.append($ok);
    $confirm.append($cancel);

    // 显示弹出框
    $("body").append($confirm);

    // 绑定事件
    $ok.on("click", function() {
        $confirm.remove();
        okCallback && okCallback();
    });

    $cancel.on("click", function() {
        $confirm.remove();
        cancelCallback && cancelCallback();
    });
}

和alert弹出框类似，我们首先定义了一个$.confirm方法，它接受三个参数：message表示要显示的消息内容；okCallback表示用户选择确认时要执行的回调函数；cancelCallback表示用户选择取消时要执行的回调函数。

在confirmBox方法中，我们创建了一个div元素，表示整个弹出框。然后创建了一个message元素，表示要显示的消息内容，以及一个ok元素和一个cancel元素，分别表示确认和取消按钮。

接着，我们把message、ok和cancel元素添加到$confirm中，并把$confirm添加到页面中。并分别给ok和cancel按钮绑定click事件，当用户点击按钮时，移除$confirm元素并执行对应的回调函数。

现在就可以在页面中使用$.confirm方法来调用这个弹出框了：

$.confirm("确定要删除吗？", function() {
    // 用户选择确认时的回调函数
    alert("删除成功");
}, function() {
    // 用户选择取消时的回调函数
    alert("取消删除");
});

到这里，我们就成功地使用jQuery扩展实现了自定义的alert和confirm弹出框功能。