jQuery UI dialog: как инициализировать без строки заголовка?
можно ли открыть диалоговое окно jQuery UI без строки заголовка?
21 ответов
Я думаю, что лучшим решением является использование опции dialogClass
.
выписка из jQuery UI docs:
во время init:$('.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 (реального dialog div) и, возможно, "брата"titlebar
div, поэтому очень трудно найти последнее, начиная с первого.
Я понял исправление для динамического удаления строки заголовка.
$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();
это удалит все элементы с классом "ui-dialog-titlebar" после отображения диалогового окна.
Я считаю, что вы можете скрыть его с помощью CSS:
.ui-dialog-titlebar {
display: none;
}
кроме того, вы можете применить это к конкретным диалоги с :
$( "#createUserDialog" ).dialog({
dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
display: none;
}
проверить "темы" Диалог. Вышеуказанное предложение использует 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
напрямую:
вы можете получить виджет диалога таким образом
$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');
а потом сделай
$dlgWidget.find(".ui-dialog-titlebar").hide();
скрыть titlebar
только в этом диалоговом окне
и в одной строке кода (мне нравится цепочка):
$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();
нет необходимости добавлять дополнительный класс в диалог таким образом, просто перейдите к нему напрямую. Workss для меня нормально.
Я нахожу его более эффективным и более читаемым, чтобы использовать открыть событие, и скрыть строку заголовка оттуда. Мне не нравится использовать поиск имени класса Page-global.
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();
единственное, что я обнаружил при скрытии заголовка диалога, - это то, что, даже если дисплей отсутствует, читатели экрана все равно поднимут его и прочитают. Если вы уже добавили свой собственный заголовок, он будет читать оба, вызывая путаницу.
то, что я сделал, было удалено из DOM с помощью $(selector).remove()
. Теперь читатели экрана (и все остальные) не увидят его, потому что он больше не существует.
Я думаю, что самый чистый способ сделать это-создать новый виджет myDialog, состоящий из виджета диалога минус штрих-код заголовка. Удаление штрих-кода заголовка выглядит просто.
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js
это работает для меня, чтобы скрыть строку заголовка диалогового окна:
$(".ui-dialog-titlebar" ).css("display", "none" );
вот как это можно сделать.
перейдите в папку темы--> база--> открыть jquery.пользовательский интерфейс.диалог.в CSS
найти
следующее
если вы не хотите отображать заголовок, просто установите display: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;
}
<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>
для меня я все еще хотел использовать повторные углы, просто не хотел видеть диагональные линии. Я использовал
$(".ui-resizable-handle").css("opacity","0");
просто понял, что я комментирую неправильный вопрос. Мой тезка :(
вы можете удалить панель со значком закрытия с помощью описанных выше techinques, а затем добавить значок закрытия самостоятельно.
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.традиция.js) и искать это._createTitlebar (); и прокомментируйте его.
теперь любой из ваших диалог появится с заголовками. Если вы хотите настроить заголовок, просто перейдите в _createTitlebar (); и отредактируйте код внутри.
by