将自定义 HTML 添加到 jQuery 对话框按钮窗格

Question

我想在 jQuery 对话框的按钮之间添加一些自定义 HTML（特别是包含单词“或”的跨度）。

我的 Javascript 是这样的：

$("#foo").dialog({
    autoOpen: false,
    width: 600,
    modal: true,
    resizable: false,
    buttons: {
        save: { text: 'Save', class: 'form-finish form-submit', click: function() {
                …
            }
        },
        cancel: { text: 'Cancel', class: 'form-cancel', click: function() {
            $( this ).dialog( "close" );
            }
        }
    }
});

它生成的 HTML 是这样的：

<button class="form-finish form-submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button>
<button class="close cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>

我想要的是这个：

<button class="form-finish form-submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button>
<span class="article">or</span>
<button class="close cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>

有什么方法可以在不破解 jQuery UI 核心的情况下做到这一点？谢谢！

Answer 1

在创建对话框后做这样的事情？

  $(".form-finish").after("<span class='article'>or</span>");