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

Я считаю, что вы можете скрыть это с помощью CSS:

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

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

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

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

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

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

Экстракт из документов jQuery ui:

во время init: $ ('. Selector'). Диалог ({dialogClass: 'notitlestuff});

или если вы хотите после init. :

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

Итак, я создал определенный диалог с вариантами DialogClass = 'NotItlestuff' и CSS, такими:

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

слишком просто !! Но я занял 1 день, чтобы подумать, почему мой предыдущий метод сверления ID-> класса не работал. На самом деле, когда вы называете .Dialog () Метод div, который вы преобразуете, стали ребенком другого Div (настоящий диалог Div) и, возможно, «брат» из TILEBAR DIV, так Очень трудно попробовать найти последнее, начиная с прежнего.

Вы можете использовать jquery, чтобы скрыть заголовок после использования dialogClass при инициализации диалога.

во время инициализации:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

Используя этот метод, вам не нужно изменять файл css, и он тоже динамический.

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

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

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

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

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

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

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

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

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

Попробуйте это

$("#ui-dialog-title-divid").parent().hide();

заменить divid соответствующим id