3

如何删除标题栏。

我在这里检查了 API，但找不到任何东西。

http://api.jqueryui.com/dialog/

我注意到其他“解决方案”的 GUI 看起来比 jQuery 更酷，尤其是

http://www.ericmmartin.com/projects/simplemodal/

但是我想使用所有资源的 jQueryUI bc...在线 API 文档、教程等。

我只需要知道如何摆脱标题栏？

谢谢

4

6 回答 6

9

有几个选项。

用 CSS 隐藏
.ui-dialog-titlebar { display: none }

使用 Javascript 隐藏
这将在创建对话框时删除标题栏，但会保留关闭按钮。

$("div").dialog({
  create: function( event, ui ) {
      var dialog = $(this).closest(".ui-dialog");
      dialog.find(".ui-dialog-titlebar-close")
            .appendTo(dialog)
            .css({
              position: "absolute",
              top: 0,
              right: 0,
              margin: "3px"
            });
      dialog.find(".ui-dialog-titlebar").remove();
  }
})​

见演示：http: //jsfiddle.net/4AuhC/52/

于 2012-10-15T17:47:13.507 回答
5

el作为创建对话框的原始元素给出：

$(el).siblings('.ui-dialog-titlebar').remove();

见http://jsfiddle.net/alnitak/N9TGd/

请注意，实际上删除标题栏（根据问题标题）也会删除关闭按钮，并破坏拖动对话框的能力！

于 2012-10-15T17:46:15.350 回答
5

在 jQuery UI 的 CSS 之后添加这个 CSS。

小心：没有更多的关闭按钮，你不能再拖动它了！

.ui-dialog-titlebar { display: none }

jsFiddle：http: //jsfiddle.net/PeVvA/

如果您想保留拖动和按钮，但它可能不适用于所有主题..

.ui-dialog-titlebar { background: none; border: 0px solid black }​

jsFiddle：http: //jsfiddle.net/PeVvA/1/

仅使用 CSS，您可能会做得更多。我可能会玩身高。

于 2012-10-15T17:47:24.083 回答
3

您可以尝试将其直接添加到您的 CSS 中。

.ui-dialog-titlebar
{ 
   display: none !important;
}
于 2012-10-15T17:47:54.660 回答
2

尝试这个：

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

（或者）

$("#dlg").dialog({
  open: function() {
    $(this).dialog("widget").find(".ui-dialog-titlebar").hide();
  }
});
于 2012-10-15T17:50:46.207 回答
0

如果要删除标题栏并仅使用样式保留关闭图标，请使用以下样式。它将标题栏缩小到关闭图标的大小并将其隐藏在后面。 ui-icons_6e6e6e_256x240.png我通过减轻ui-icons_222222_256x240.pngjqueryui 附带的图像创建。

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: 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-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: 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");}
于 2013-05-09T23:27:15.000 回答