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

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

Экстракт из jquery UI docs:

во время init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

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

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

Итак, я создал некоторый диалог с опцией dialogclass= 'noTitleStuff' и css вроде этого:

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

слишком просто!! но я подумал, почему мой предыдущий метод бурения класса id → не работал. Фактически, когда вы вызываете метод .dialog(), div, который вы преобразовываете, становится дочерним по отношению к другому div (реальный диалог div) и, возможно, "брату" из div titlebar, поэтому очень сложно попытаться найти последнее, начиная с прежнего.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

а затем do

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

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

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

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

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

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

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

Simple.

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

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

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

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

во время init:

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

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

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

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

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

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

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

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

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

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

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

Перейдите в папку тем → база → откройте 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; 
}

Теперь нажимаем кнопку "Закрыть", вы также можете установить ее 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})

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

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

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

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

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

$('#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>

перейдите в свой jquery-ui.js(в моем случае jquery-ui-1.10.3.custom.js) и выполните поиск this._createTitlebar(); и прокомментировать его.

теперь любой из ваших диалогов появится с заголовками. Если вы хотите настроить заголовок, просто перейдите в _createTitlebar(); и отредактируйте код внутри.

по

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

CSS

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

//добавьте этот div в div, содержащий ваш контент

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });