How to add extra buttons to jQuery dialog title bar

Question

How to add extra button to jQuery dialog title bar

I want to add extra buttons to jQuery Dialog Title Bar. I want to add minimum 5 Buttons to jQuery Dialog Title Bar. Maximum "N".

Buttons like as listed below:

1. Help Button
2. Maximize Button
3. Minimize Button
4. About Button

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

To add more buttons, just add'em in the buttons array

$( ".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
                }
            }
        ]
    });

see an example HERE

--- EDIT ---

now i see what are you trying to do.. i think there is no clean way to do that, so i suggest this:

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

to reach better similarity with the dialog close button. I see pumpkinzzz's answer and other code around including CSS/JS code on JQuery UI and I came to this.

In your dialog definition add a dialog class property, for example:

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

In your CSS file/section add this:

.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
}

In your javascript file or section add this (remember to use the same class name as in the dialogClass property):

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

With all this you can have a nicer help button. Hoping this meet your expectations and save time to others.

Answer 3

just use the 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");
    });