it-swarm.com.ru

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

Я пытаюсь скрыть диалоговое окно jQuery-ui в строке заголовка /, но держу кнопку закрытия в строке заголовка видимой. Я искал много сообщений на stackoverflow как этот . В каждом сообщении строка заголовка скрыта, но место, занятое строкой, все еще там. Я хочу удалить это пространство также , но не удаляя кнопку закрытия.

Как я могу это сделать?

15
Tom Rider

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

Используйте параметр .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.

18
Salman A

Если вы хотите удалить панель титров и сохранить значок закрытия, используя только стили, используйте стили ниже. Она сжимает строку заголовка до размера значка закрытия и прячет его позади. 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");}
1
jonny

На мой взгляд, у вас есть 3 варианта.

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

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

0
leopic

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

Перейдите в папку с темами -> base -> open jquery.ui.dialog.css

Найти

Подписок

если вы не хотите отображать titleBar, просто установите display: 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; 
}

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

.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})
0
ProgrammingNinja