0

Есть некое диалоговое окно на 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>

Как можно добавить на titlebar (около крестика) кнопку "развернуть на весь экран"?
Ну или просто, как добавить кнопку?

1 ответ 1

2

По идее кнопки можно добавлять только в нижний бар. Но без костылей и жизнь проста!

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]
            });
        });      
    }
});
3
  • 1
    Спасибо :) я кстати тоже немного пошаманил, и получилось как-то так: jsfiddle.net/9rwfZ/2 добавил вот этот кусок: 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);
    – IVsevolod
    9 авг 2013 в 9:39
  • 1
    @IVsevolod учтите, с динамическими элементами не будет работать. Лучше архитектуру чуть наперед продумать)
    – lampa
    9 авг 2013 в 11:56
  • @lampa, мм, в свою подзадачу уже встроил, работает нормально. Доволен :)
    – IVsevolod
    9 авг 2013 в 12:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.