Question

可以在ui-dialog-titlebar中将图像添加到对话框中吗？

Answer 1

确实如此。在尺寸和对齐方面看起来很漂亮将是棘手的部分。但是在标题栏中放置图像应该很简单：

$(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");

修改
基于尼克在下面所说的（干杯），如果你想真的硬核，你可以将代码放在对话框的开放事件中，即：

$(".putSelectorHere").dialog({ open: function(event, ui) { $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />"); } });
相关文档
Click。

Answer 2

如果您使用

 $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");

关于公开赛事然后先删除felix.gif

$(".ui-dialog-titlebar").remove("#myNewImage");

因为如果您不止一次打开对话框，它将多次添加相同的图像或销毁对话框

Answer 3

这些都是非常好的答案。我觉得有一个小而重要的功能被遗漏了，所以我正在折腾我的解决方案。

您可以将代码“绑定”到事件中。我很懒，所以我使用.live（）方便绑定。这让我可以在任何地方抛出所有专门的代码。

尝试使用此

<script type="text/javascript">
   function initPopups()
   {
      <!-- this is a 'close' handler for all of my modal popups-->
      $('.ui-widget-overlay').live('click',function(){$('.YOURCLASS').dialog('destroy');});

      <!-- this puts the lil logo in all of the popup dialog titlebars -->
      $('.YOURCLASS').live('dialogcreate',function(){$('.ui-dialog-titlebar').append("<img id='my-img' src='THEIMG.png'/>");});
   }

  <!-- run the scripts once the doc is done loading -->
  $(document).ready(initPopups());
</script>

然后使用img id来操纵所有相关的CSS以使其看起来很好

如果您将'createdialog'和'click'事件都放入一个.live（）调用中，则可以清除它。在这里查看API： JQuery .live()

有可能你想要用你的标题栏做一些更有趣的事情（这就是我最终的结果）。我建议使用jQuery的.load('FANCY-TITLEBAR.xml');和.append（）而不仅仅是.append('GIANT-BLOCK-OF-MARKUP);

Answer 4

这可以用作通过css添加图像的解决方案。下面是我自己使用的代码示例。

var $help = $('#dialog_help')
.dialog({
   title: 'Help',
   autoOpen: false,
   draggable: false,
   width: 200,
   position: [100,100],
   closeText: 'Close',
   dialogClass: 'dialoghelp'
});

$('.openhelp').click(function() {
    $help.dialog('open');

    return false;
});

添加-dialogClass：'dialoghelp' - 使我能够以下列方式在css中自定义对话框窗口。

你可以这样做，正在替换最初的主要.ui对话框，用自定义类替换它。

.ui-dialog .ui-dialog-titlebar { padding: 3px; position: relative; background: red;}
//original

.dialoghelp .ui-dialog-titlebar { padding: 3px; position: relative; background: red;}
//adjusted

所以我想，通过这种方式可以添加图像。

Answer 5

我使用过这样的CSS样式：

.ui-dialog .ui-dialog-titlebar { background: transparent url(/path/to/images.gif) no-repeat top left; }

它位于我在jquery-ui.css

之后添加的样式表中

如何在JQuery中将图像添加到ui-dialog-titlebar？

5 个答案: