如何删除 jQuery-ui 对话框标题栏？

Posted 2023-03-06

【中文标题】如何删除 jQuery-ui 对话框标题栏？

【英文标题】：How to remove jQuery-ui dialog title bar?

【发布时间】：2012-10-28 07:10:59

【问题描述】：

我试图隐藏jQuery-ui dialog 的标题栏，但保持标题栏中的关闭按钮可见。我在 *** like this one 上搜索了很多帖子。在每篇文章中，标题栏是隐藏的，但栏所占用的空间仍然存在。我也想删除那个空间但不删除关闭按钮。

我该怎么做？

【问题讨论】：

如果隐藏整个标题栏并添加自定义关闭按钮会怎样？

【参考方案1】：

基于this answer:

使用.dialog("widget") 选项来定位对话框的 div 包装器。包装器包含用于对话框的所有标记，包括标题、标题栏和关闭按钮；和对话内容本身。这是调用该方法并隐藏标题栏的一种方法：

$("#id").dialog(
    autoOpen: false
).dialog("widget").find(".ui-dialog-title").hide();​

然后您可以使用 CSS 来消除不必要的边距、边框和内边距。例如：

.ui-dialog-titlebar 
    float: right;
    border: 0;
    padding: 0;

.ui-dialog-titlebar-close 
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;

Here is a demo 基于上面的代码加上它使用 jQuery 添加必要的样式。

【讨论】：

我猜你的意思是 ``find(".ui-dialog-titlebar")

@MikeJM .ui-dialog-titlebar 包含 (i) .ui-dialog-title (ii) .ui-dialog-titlebar-close。 OP 想要保留关闭按钮，所以.ui-dialog-title 是正确的。

是的，我明白了，很抱歉。

【参考方案2】：

这是可以做到的。

转到主题文件夹--> base--> 打开 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 并通过 jquery 添加和设置 css 来克服这个问题

这里是语法

$(".specificclass").css(display:normal)

【参考方案3】：

如果您想删除标题栏并仅使用样式保留关闭图标，请使用以下样式。它将标题栏缩小到关闭图标的大小并将其隐藏在后面。 ui-icons_6e6e6e_256x240.png 是我将jqueryui自带的ui-icons_222222_256x240.png图片变亮创建的。

.ui-dialog .ui-dialog-titlebar.ui-widget-headerbackground: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;

.ui-dialog-titlebar.ui-widget-header .ui-dialog-titledisplay: none;

.ui-dialog-titlebar.ui-widget-header .ui-buttonbackground: none; border: 1px solid #CCCCCC;

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-closemargin: 0px; position: static;

.ui-dialog .dialog.ui-dialog-contentpadding: 0px 10px 10px 10px;

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-iconposition: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");

【讨论】：

如果你想让整个对话框可拖动，使用这个： $("#yourdialog").parent().draggable(); （创建对话框后）

【参考方案4】：

在我看来，你有 3 个选择。

是的，完全消除标题栏并添加一个您可以设置样式以匹配默认标题栏的自定义标题栏，使用绝对定位应该是关键。 如果您有时间，请扩展（而不是覆盖）对话框 https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 的 _create 方法来做您需要的事情 使用 CSS hackery 将标题栏保留在那里，除关闭按钮外，所有元素的高度均为 0。

两者各有优缺点，如果可以的话，我会推荐 #2 最好的，这里有一些关于如何使用小部件的信息http://api.jqueryui.com/jQuery.widget/