Как удалить строку заголовка jQuery-ui?

Ответ 1

Основываясь на этом ответе:

Используйте .dialog("widget"), чтобы найти оболочку div для диалога. Обертка содержит всю разметку, используемую для диалога, включая заголовок, заголовок и кнопку закрытия; и сам диалог. Вот один из способов вызвать метод и скрыть строку заголовка:

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

Затем вы можете использовать CSS для устранения ненужных полей, границ и отступов. Например:

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

Вот демонстрация на основе вышеуказанного кода плюс добавляет необходимые стили с помощью jQuery.

Ответ 2

Если вы хотите удалить titelbar и сохранить значок закрытия только с помощью стилей, используйте стили ниже. Он сжимает строку заголовка до размера значка закрытия и скрывает его. ui-icons_6e6e6e_256x240.png Я создал, осветляя изображение ui-icons_222222_256x240.png, с которым поставляется jqueryui.

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}

Ответ 3

Как я вижу, у вас есть 3 варианта.

• Да, полностью удалите заголовок и добавьте пользовательский, который вы можете использовать, чтобы соответствовать стандарту, используя абсолютное позиционирование, должен быть ключ.
• Если у вас есть время, расширьте (не перезаписывайте) метод _create диалогового окна https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74, чтобы сделать то, что вам нужно
• Работайте с хакерами CSS, чтобы сохранить заголовок там с высотой 0 для всех элементов, но кнопка закрытия.

У кого-то есть свои минусы и плюсы, я бы порекомендовал # 2 лучшее, если можно, вот некоторая информация о том, как работать с виджетами http://api.jqueryui.com/jQuery.widget/

Ответ 4

Вот как это можно сделать.

Перейдите в папку тем → база → откройте jquery.ui.dialog.css

Find

Подписок

если вы не хотите отображать заголовокBar, тогда просто установите отображение: none, как я сделал в следующем.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Аналогично для заголовка.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Теперь нажимаем кнопку "Закрыть", вы также можете установить ее none или вы можете установить ее

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

Я много раз искал, но ничего не понял. Однако это приведет к тому, что все приложение не будет иметь закрытую кнопку, панель заголовка для диалога, но вы также сможете преодолеть это, используя jquery и добавив и установив css через jquery

вот синтаксис для этого

$(".specificclass").css({display:normal})