我在我的网站上使用重力表格。使用列表字段(高级字段)如何在delete_list_item上显示确认消息
答案 0 :(得分:0)
在custom.js(文件)中GFORM ADD LIST:gformAddListItem_new
function gformAddListItem_new(element, max) {
if (jQuery(element).hasClass("gfield_icon_disabled"))
return;
var tr = jQuery(element).closest('tr');
var clone = tr.clone();
var tabindex = clone.find(":input:last").attr("tabindex");
clone.find("input, select, textarea").attr("tabindex", tabindex).not(":checkbox, :radio").val("");
clone.find(":checkbox, :radio").prop("checked", false);
clone = gform.applyFilters('gform_list_item_pre_add', clone);
tr.after(clone);
gformToggleIcons(tr.parent(), max);
gformAdjustClasses(tr.parent());
}
function gformDeleteListItem_new(element, max) {
jQuery(".dialog-confirm").html("Are you sure you want to delete this message?");
// Define the Dialog and its properties.
jQuery(".dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 150,
width: 400,
dialogClass: 'no-close success-dialog',
open: function () {
$(this).closest(".ui-dialog")
.find(".ui-dialog-titlebar-close")
.removeClass("ui-dialog-titlebar-close")
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
},
buttons: {
"Yes": function () {
jQuery(this).dialog('close');
var tr = jQuery(element).parent().parent();
var parent = tr.parent();
tr.remove();
gformToggleIcons(parent, max);
gformAdjustClasses(parent);
// console.log("delete list");
},
"No": function () {
jQuery(this).dialog('close');
}
}
});
}
添加一些css
.gform_wrapper table.gfield_list .gfield_list_row_odd, .gform_wrapper table.gfield_list .gfield_list_row_even{ padding: 0 0 15px; display: block;}
.ui-dialog.success-dialog .ui-dialog-titlebar{ color:#fff; background: #bed13a !important}
.ui-dialog.success-dialog button{ float: right}
.ui-dialog.success-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button{
cursor: pointer;
background-color: #f7931e ;
padding: 6px 18px ;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
font-size: 14px;
font-weight: 700;
color: #fff;
border: none;
text-align: center;
}
.ui-dialog.success-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
background: url("assets/images/close_dialog.png") 50% 50% repeat-x transparent;
width: 16px;
height: 16px;
border: none;
}
.ui-dialog.success-dialog .ui-dialog-titlebar button {
background: url("assets/images/close_dialog.png") 50% 50% repeat-x transparent;
width: 16px;
height: 16px;
border: none;
}