如何在jQuery对话框标题栏中添加额外的按钮

以获得与对话框关闭按钮更好的相似性。我在JQueryUI上看到了pumpkinzzz的答案和其他代码，包括CSS/JS代码，我想到了这一点。

在对话框定义中添加对话框类属性，例如：

$("#yourDlg").dialog({
    autoOpen: false,
    height: 400,
    width: 800,
    modal: true,
    dialogClass: 'yourDialogClass', // any name works
 ...
});

在您的CSS文件/部分中添加以下内容：

.ui-dialog .ui-dialog-titlebar-help{
  position:absolute;
  right:2em; // This puts the help button along the close one, so change it accordingly
  top:50%;
  width:20px;
  margin:-10px 0 0 0;
  padding:1px;
  height:20px
}

在您的javascript文件或部分中添加以下内容（记住使用与dialogClass属性中相同的类名）：

$(".yourDialogClass").children(".ui-dialog-titlebar").append("<button id='btnHelp' class='ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-help' type='button' role='button' title='Help'><span class='ui-button-icon-primary ui-icon ui-icon-help'></span><span class='ui-button-text'>Help</span></button>");
$("#btnHelp")
    .hover(function () {
        $(this).addClass('ui-state-hover');
    }, function () {
        $(this).removeClass('ui-state-hover');
    })
    .click(function (e) {
      // your click code here
      alert('Help');
      return false; // to avoid submit if any form
    });

有了这些，你可以有一个更好的帮助按钮。希望这能满足你的期望，并为他人节省时间。

只需使用jquery ui api

// create the dialog
    $("div#google").dialog({
        "title": "Google",
        });
// find the titlebar
    var dlgtb = $("div#google").dialog("instance").uiDialogTitlebar; 
// add the button to titlebar    
    dlgtb.append("<button id='btnExternal'>M</button>"); 
// make it an button    
    $("#btnExternal").button({
        icon: "ui-icon-extlink",
        showLabel: false,
        });
// add click handler
    $("#btnExternal").click(function () {
        window.open("https://www.google.com", "google");
    }); 

要添加更多按钮，只需在buttons阵列中添加'em

$( ".dialog" ).dialog({
       autoOpen: false,
       buttons: [
            {
                text: "Help",
                icon: "ui-icon-help",
                click: function( e ) {
                   //function
                }
            },
            {
                text: "Minimize",
                icon: "ui-icon-minimize",
                click: function( e ) {
                    //function
                }
            },
            {
                text: "Maximize",
                icon: "ui-icon-maximize",
                click: function( e ) {
                   //function
                }
            },
            {
                text: "About",
                icon: "ui-icon-about",
                click: function( e ) {
                   //function
                }
            }
        ]
    });

请参阅HERE 示例

---编辑---

现在我明白你想做什么了。我认为没有干净的方法可以做到这一点，所以我建议这样做：

$( ".dialog" ).dialog({
       autoOpen: true,
       buttons: [
            {
                text: "Minimize",
                icon: "ui-icon-minimize",
                click: function( e ) {
                    //function
                }
            },
            {
                text: "Maximize",
                icon: "ui-icon-maximize",
                click: function( e ) {
                   //function
                }
            }
        ],
        create: function( event, ui ) {
            $('.ui-dialog-buttonset').prependTo('.ui-dialog-titlebar');
        }
    });

https://jsfiddle.net/myh5d2sz/1/