1

我正在使用js确认。我想用 jquery UI让它更漂亮。

使用js确认：

$("a.delete").click(function() {
    el = $(this);
    if (confirm("Are you sure you want delete the data?")) {
        $.ajax({
            url : $(this).attr("href"),
            type : "GET",
            dataType : 'json', //The requested response in JSON format
            success : function(response) {
                if (response.status == 1) {
                    loadData();
                    $("#divFormContent").load("ajax.php?module=test&action=form_test");
                    $("#divFormContent").hide();
                    $("#btn_hide").hide();
                    // alert("The data successfully deleted!");
                } else {
                    alert("Data failed in the clearing!");
                }
            }
        });
    }
    return false;
});

谁能告诉我如何使用 jquery UI 确认更改它？

4

1 回答 1

2

首先，您需要创建将要显示的元素。示例 html：

<div id="dialog-confirm" title="Confirmation">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:5px 7px 20px 0;"></span>Are you sure?</p>
</div>

.dialog()当您通过autoOpen: false参数调用该元素时，该元素将自动隐藏。最好在 DOM 就绪处理程序中执行此操作。

jQuery UI 的对话框是异步的，它们不会像提示那样冻结函数并等待响应confirm。相反，您必须将函数包装在“是”确认按钮的回调中。

当您需要该对话框时，只需调用$("#dialog-confirm").dialog("open");.

最后，this当您将函数从单击处理程序移动到对话框的回调处理程序时，将不再引用单击的元素。我曾经.data将点击的数据存储$(this).attr('href')在#dialog-confirm的数据中，并为 Ajax 调用检索它。

这是代码：

$(function() {
    $("a.delete").click(function() {
        $('#dialog-confirm').data('clickedHref', $(this).attr('href'));
        $("#dialog-confirm").dialog("open");
        return false;
    });

    $("#dialog-confirm").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        buttons: {
            "Yes": function() {
                $.ajax({
                    url : $('#dialog-confirm').data('clickedHref'),
                    //rest of your function here
                });
                $(this).dialog("close");
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });
});

jsFiddle

于 2012-08-03T09:51:10.573 回答