G Naga Subrahmanyam G Naga Subrahmanyam - 7 months ago 243
Javascript Question

How to add extra buttons to jQuery dialog title bar

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

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/