我正在使用js确认。我想更多地beautiful with 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确认更改它?
答案 0 :(得分: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");
}
}
});
});