jquery UI dialog: как инициализировать без заголовка?

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

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

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

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

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

Поэтому я создал диалог с опцией dialogClass = ‘noTitleStuff’ и css:

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

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

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

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

Это приведет к удалению всех элементов с помощью classа «ui-dialog-titlebar» после визуализации диалогового windows.

Я считаю, что вы можете скрыть его с помощью 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(); и $("#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 Widget таким образом

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

и затем

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

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

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

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

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

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

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

Просто.

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

во время init:

 $('.selector').dialog({ dialogClass: 'yourclassname' }); $('.yourclassname div.ui-dialog-titlebar').hide(); 

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

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

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

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

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

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

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

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

Попробуй это

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

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

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

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

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

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

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

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

найти

Подписок

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

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

Samilarly для названия также.

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

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

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

    
 Here your HTML content 
 Show me! 

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

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

Просто понял, что комментирую неправильный вопрос. Жить до моего тезки 🙁

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

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'); }); 

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

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

от