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

Question

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

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

如下所示的按钮：

帮助按钮
最大化按钮
最小化按钮
关于按钮

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

要添加更多按钮，只需将它们添加到 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/

Answer 2

与对话框关闭按钮达到更好的相似度。我看到了 pumpkinzzz 的答案和其他代码，包括 JQuery UI 上的 CSS/JS 代码，我来到这里。

在您的对话框定义中添加一个对话框 class 属性，例如：

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

在您的 CSS file/section 中添加：

.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 属性中相同的 class 名称）：

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

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

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

How to add extra buttons to jQuery dialog title bar

javascript

jquery

jquery-ui

jquery-dialog

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