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

Question

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

我想向 jQuery 对话框标题栏添加额外的按钮。我想向 jQuery 对话框标题栏添加至少 5 个按钮。最大“N”。

如下所示的按钮：

1. 帮助按钮
2. 最大化按钮
3. 最小化按钮
4. 关于按钮

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

Answer 1

与对话框关闭按钮达到更好的相似性。我看到了南瓜的答案和其他代码，包括 JQuery UI 上的 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
    });

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

Answer 2

只需使用 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");
    }); 

Answer 3

要添加更多按钮，只需将它们添加到buttons 数组中

$( ".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/