jquery UI 对话框：如何在没有标题栏的情况下进行初始化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1023072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery UI dialog: how to initialize without a title bar?
提问by Loony2nz
Is it possible to open a jQuery UI Dialog without a title bar?
是否可以在没有标题栏的情况下打开 jQuery UI 对话框？
采纳答案by Loony2nz
I figured out a fix for dynamically removing the title bar.
我想出了一个动态删除标题栏的修复方法。
$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();
This will remove all elements with the class 'ui-dialog-titlebar' after the dialog box is rendered.
这将在对话框呈现后删除所有具有“ui-dialog-titlebar”类的元素。
回答by mizar
I think that the best solution is to use the option dialogClass.
我认为最好的解决方案是使用 option dialogClass。
An extract from jquery UI docs:
来自 jquery UI 文档的摘录：
during init : $('.selector').dialog({ dialogClass: 'noTitleStuff' });
在初始化期间： $('.selector').dialog({ dialogClass: 'noTitleStuff' });
or if you want after init. :
或者如果你想在初始化之后。：
$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');
So i created some dialog with option dialogClass='noTitleStuff' and the css like that:
所以我创建了一些对话框，选项为 dialogClass='noTitleStuff' 和这样的 css：
.noTitleStuff .ui-dialog-titlebar {display:none}
too simple !! but i took 1 day to think why my previous id->class drilling method was not working. In fact when you call .dialog()method the div you transform become a child of another div (the real dialog div) and possibly a 'brother' of the titlebardiv, so it's very difficult to try finding the latter starting from former.
太简单 ！！但我花了 1 天的时间思考为什么我以前的 id->class 钻孔方法不起作用。事实上，当你调用.dialog()方法时，你转换的 div 成为另一个 div（真正的对话 div）的子级，并且可能是 div 的“兄弟” titlebar，因此很难尝试从前者开始找到后者。
回答by Sampson
I believe you can hide it with CSS:
我相信你可以用 CSS 隐藏它：
.ui-dialog-titlebar {
display: none;
}
Alternatively, you can apply this to specific dialogs with the dialogClassoption:
或者，您可以使用以下dialogClass选项将其应用于特定对话框：
$( "#createUserDialog" ).dialog({
dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
display: none;
}
Check out "Theming" the Dialog. The above suggestion makes use of the dialogClassoption, which appears to be on it's way outin favor of a new method.
回答by Amirouche Douda
I use this in my projects
我在我的项目中使用它
$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();
回答by Koder
This worked for me:
这对我有用：
$("#dialog").dialog({
create: function (event, ui) {
$(".ui-widget-header").hide();
},
回答by Firas Abd Alrahman
Try using
尝试使用
$("#mydialog").closest(".ui-dialog-titlebar").hide();
This will hide all dialogs titles
这将隐藏所有对话框标题
$(".ui-dialog-titlebar").hide();
回答by odedbd
Actually there's yet another way to do it, using the dialog widgetdirectly:
实际上还有另一种方法可以widget直接使用对话框：
You can get the Dialog Widget thus
您可以因此获得对话框小部件
$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');
and then do
然后做
$dlgWidget.find(".ui-dialog-titlebar").hide();
to hide the titlebarwithin that dialog only
titlebar仅在该对话框中隐藏
and in a single line of code (I like chaining):
并在一行代码中（我喜欢链接）：
$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();
No need to add an extra class to the dialog this way, just go at it directly. Workss fine for me.
无需以这种方式向对话框添加额外的类，直接进入即可。对我来说很好用。
回答by ingredient_15939
I find it more efficient, and more readable, to use the openevent, and hide the title bar from there. I don't like using page-global class name searches.
我发现使用open事件并从那里隐藏标题栏更有效，更易读。我不喜欢使用页面全局类名搜索。
open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }
Simple.
简单的。
回答by Andrej Kaurin
I like overriding jQuery widgets.
我喜欢覆盖 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);
So you can now setup if you want to show title bar or not
所以你现在可以设置是否要显示标题栏
$('#mydialog').dialog({
headerVisible: false // or true
});
回答by Arun Vasudevan Nair
You can use jquery to hide titlebar after using dialogClass when initializing the dialog.
初始化对话框时，您可以在使用 dialogClass 后使用 jquery 隐藏标题栏。
during init :
在初始化期间：
$('.selector').dialog({
dialogClass: 'yourclassname'
});
$('.yourclassname div.ui-dialog-titlebar').hide();
By using this method, you don't need to change your css file, and this is dynamic too.
通过使用这种方法，您不需要更改您的 css 文件，这也是动态的。
