Question

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

我想在jQuery Dialog Title Bar中添加额外的按钮。我想在jQuery Dialog Title Bar中添加最少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

与对话框关闭按钮达到更好的相似性。我看到了pumpkinzzz的答案和其他代码，包括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数组

中添加＆em; 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/

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

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

3 个答案: