Add a button to the titlebar in the jQuery UI dialog box

Question

There is some kind of dialog on jQuery UI:

$("#dialog").dialog({ dialogClass: 'test', autoOpen: false }); $("#open").click(function(){ $("#dialog").dialog("open"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <button id="open">Open</button> <div id="dialog"> Диалог </div>

How can I add a "maximize" button on the titlebar (near the cross)?
Well, or just how to add a button?

Accepted Answer · 2013-08-09T08:41:44

In theory, the buttons can only be added to the lower bar. But without crutches and life is simple!

http://jsfiddle.net/9rwfZ/1/

 $("#dialog").dialog({ dialogClass: 'test', autoOpen: false, // вызываемая функция при открытии окна open: function(event, ui) { // создаем кнопку var $buttonMaximize = $('<a href="#"><span class="ui-icon ui-icon-closethick">maximize</span></a>') .addClass('ui-dialog-titlebar-maximize') .addClass('ui-corner-all'); //запоминаем контекст окна var $that = $(this); // добавляем нашу кнопку до кнопки "закрыть" $that.parent().children().children('.ui-dialog-titlebar-close').before($buttonMaximize); // вешаем событие на нашу кнопку $buttonMaximize.on('click', function() { $that.dialog({ width: $(window).width()-20, height: $(window).height()-20, position: [0,0] }); }); } });

Thank you :) by the way, I also messed around a bit, and it turned out something like this: jsfiddle.net/9rwfZ/2 added this piece: var adda = jQuery ('<a href = "#" target = "_ blanck" id = "maximized "> ') .addClass (' ui-dialog-titlebar-close ui-corner-all ') .attr (' role ',' button '). css (' right ',' 1.7em '). mouseover (function ( ) {jQuery (this) .addClass ('ui-state-hover');}) .mouseout (function () {jQuery (this) .removeClass ('ui-state-hover')}). append ("<span class = 'ui-icon ui-icon-newwin'> </ span> ");
jQuery (". test"). children (". ui-dialog-titlebar"). append (adda);

Add a button to the titlebar in the jQuery UI dialog box

1 answer 1

More articles: