2

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

4

5 回答 5

7

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

$(".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' />");
  }
});

点击查看相关文档。

于 2010-05-10T06:56:15.303 回答
2

如果你使用

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

在公开活动上，然后首先删除 felix.gif

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

因为如果您多次打开对话框，它将多次添加相同的图像或破坏对话框

于 2012-07-09T06:28:52.043 回答
1

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

您可以将代码“绑定”到事件。我很懒所以我使用 .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);

于 2011-03-10T20:15:05.587 回答
1

这可以用于在 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-dialog，将其替换为自定义类。

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

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

所以我想，可以通过这个来添加图像。

于 2011-10-11T10:29:30.307 回答
0

我使用了这样的 CSS 样式：

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

它在我在 jquery-ui.css 之后添加的样式表中

于 2010-05-10T12:25:45.127 回答