javascriptjqueryjquery-uijquery-dialog

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
                }
            }
        ]
    });

Solution

  • 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/