JQuery UI диалог: как инициализировать без строки заголовка?

Question

Можно ли открыть диалоговое окно jQuery UI без строки заголовка?

Answer 1

Я думаю, что лучшим решением является использование опции dialogClass.

Выдержка из документов jquery UI:

во время инициализации: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

или, если хотите, после init. :

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

Итак, я создал диалог с опцией dialogClass = 'noTitleStuff' и css следующим образом:

.noTitleStuff .ui-dialog-titlebar {display:none}

слишком просто !! но я потратил 1 день, чтобы подумать, почему мой предыдущий метод сверления id-> class не работал. На самом деле, когда вы вызываете метод .dialog(), преобразуемый вами div становится потомком другого div (реального диалогового div) и, возможно, «братом» titlebar div, поэтому очень трудно найти последний, начиная с первого .

Answer 2

Я нашел исправление для динамического удаления строки заголовка.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Это удалит все элементы с классом 'ui-dialog-titlebar' после отображения диалогового окна.

Answer 3

Полагаю, вы можете скрыть это с помощью CSS:

.ui-dialog-titlebar {
    display: none;
}

Кроме того, вы можете применить это к определенным диалогам с опцией dialogClass:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});

.no-titlebar .ui-dialog-titlebar {
    display: none;
}

Проверьте " Theming " Диалог. Вышеупомянутое предложение использует опцию dialogClass, которая, кажется, находится на , это выход в пользу нового метода.

Answer 4

Я использую это в своих проектах

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

Answer 5

Это сработало для меня:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Answer 6

Попробуйте использовать

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Это скроет все заголовки диалогов

$(".ui-dialog-titlebar").hide();

Answer 7

На самом деле есть еще один способ сделать это, используя диалог widget напрямую:

Вы можете получить виджет диалога, таким образом

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

, а затем сделать

$dlgWidget.find(".ui-dialog-titlebar").hide();

чтобы скрыть titlebar только в этом диалоге

и в одной строке кода (мне нравится цепочка):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

Нет необходимости добавлять дополнительный класс в диалог, просто перейдите к нему напрямую. Для меня это нормально.

Answer 8

Я считаю более эффективным и более читабельным использование события open и скрытие строки заголовка. Мне не нравится использовать поиск имени класса по всему миру.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Simple.

Answer 9

Мне нравятся переопределенные виджеты jQuery.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Теперь вы можете настроить, хотите ли вы показать строку заголовка или нет

   $('#mydialog').dialog({
      headerVisible: false // or true
});

Answer 10

Если у вас несколько диалогов, вы можете использовать это:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });