it-swarm.com.ru

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

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

245
Loony2nz

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

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

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

95
Loony2nz

Я думаю, что лучшим решением является использование опции 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) и, возможно, «братом» div titlebar, поэтому очень трудно попытаться найти последний, начиная с первого.

285
mizar

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

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

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

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

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

58
Sampson

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

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

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

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

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

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

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

$(".ui-dialog-titlebar").hide();
8
Firas Abd Alrahman

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

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

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

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

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

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

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

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

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

7
odedbd

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

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

Просто.

5
ingredient_15939

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

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

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

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

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

4
Arun Vasudevan Nair

Мне нравится переопределение виджетов 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
});
4
Andrej Kaurin

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

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

Это самый простой способ сделать это, и он удалит заголовок только в этом конкретном диалоге;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();
3
pdubbb1

Одна вещь, которую я обнаружил, скрывая заголовок Dialog, - это то, что, даже если display отсутствует, программы чтения с экрана все равно поднимают его и будут читать. Если вы уже добавили свою собственную строку заголовка, она будет читать оба, вызывая путаницу. 

То, что я сделал, было удалено из DOM с помощью $(selector).remove(). Теперь программы чтения с экрана (и все остальные) не увидят его, потому что он больше не существует.

2
user616258

Попробуй это

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

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

2
abdulkaderjeelani

Это помогло мне скрыть строку заголовка диалогового окна: 

$(".ui-dialog-titlebar" ).css("display", "none" );
1
user1712742

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

Перейдите в папку с темами -> 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})
1
ProgrammingNinja

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

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

1
Joffer

Я все еще хотел использовать изменяемые углы, просто не хотел видеть диагональные линии. я использовал

$(".ui-resizable-handle").css("opacity","0");

Просто понял, что я комментирую не тот вопрос. Дожить до моего тезки :(

0
controlZ

Эта следующая форма устранила мне проблему.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});
#basicModal {
  display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

0
jcromeros1987