在JQuery对话框中添加按钮到对话框底栏

时间:2011-01-27 16:06:36

标签: javascript html jquery-ui-dialog

现在我们有一个如下所示的JQuery UI对话框:

$(id).dialog({
    modal: true,
    resizable: false,
    title: title,
    width:350,
    height:height,
    autoOpen: false,
    buttons: { "Cancel": function() { $(this).dialog("close"); } }
});

这很好用。但是,在JQuery对话框中我们有这个div:

<div id="SaveTemplateDialog">
    <table width="100%">
        <tr class="templatesExist">
            <td colspan="2">
                <%= Html.RadioButton("SaveNewTemplate", true, true, new { onclick = "SetSaveTemplateDisplay();", createnewtemplate = true })%>Create
                    new template
            </td>
        </tr>
        <tr class="newtemplate">
            <td>
                &nbsp; &nbsp; &nbsp;
            </td>
            <td>
                Template name:
                <input type="text" id="NewTemplateName" onchange="ValidateTemplateName();" /><span                           nonstdvalidatorfor="NewTemplateName" message="Template name is a required field."><img
                            class="validation" src="<%= VirtualPathUtility.ToAbsolute("~/img/exclamation.gif")%>" /></span>
            </td>
        </tr>
        <tr class="templatesExist">
            <td colspan="2">
                <%= Html.RadioButton("SaveNewTemplate", false, false, new { onclick = "SetSaveTemplateDisplay();" })%>Overwrite
                    existing template
            </td>
        </tr>
        <tr class="overwritetemplate templatesExist">
            <td>
                &nbsp; &nbsp; &nbsp;
            </td>
            <td>
                <%= Html.DropDownList("ExistingTemplate", Chatham.Web.Models.Indications.DropDownData.AllEditableTemplates())%>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <div style="text-align: center; cursor: pointer;" id="saveTemplateButton">
                    <img src="<%= VirtualPathUtility.ToAbsolute("~/img/btn_form_save_template_off.GIF")%>" />
                </div>
                <div style="text-align: center; cursor: pointer;" id="saveTemplateValidation">
                    Please correct all validation before Saving
                </div>
            </td>
        </tr>
    </table>
</div>

看到id =“saveTemplateButton”按钮?我们希望它坐在JQuery对话框底部栏的“取消”按钮旁边。我尝试了一堆废话,但无法让它工作。我怎么能这样做?

1 个答案:

答案 0 :(得分:0)

这很有用。我第一次弄乱了语法。

buttons: {
                    "Save Template": function() 
                        { 
                            if ($('#saveTemplateValidation').is(":visible"))
                            {
                                alert('Please correct validation errors before saving.');
                            }
                            else {
                                SaveTemplate();
                            }
                        }, 
                    "Cancel": function() 
                        { 
                            $(this).dialog("close"); 
                        } 
                }