How to add an image to the ui-dialog-titlebar in JQuery?

It is possible to add an image to the ui-dialog-titlebar in开发者_如何学Goto a dialog box?.

It sure is. Making it look pretty in terms of sizing and alignment will be the tricky part. But placing an image in the titlebar should be as simple as:

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

Edit:
Building on what Nick said below (cheers), if you wanted to be really hardcore, you would place the code inside the open event of the dialog, ie:

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

Click for relevant docs.

if you use

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

on open event then first remove felix.gif

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

because if you open dialog box more than once it will add same image more than once or destroy dialog box

These are all really good answers. I felt like one small and important feature was missed so I'm tossing in my solution.

you can 'bind' the code to an event. I'm lazy so i use the .live() convenience bind. this lets me toss all of the specialized code in wherever.

Try using this

<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>

then use the img id to manipulate all the pertinent CSS to make it look good

This can be cleaned up if you put both 'createdialog' and 'click' events into one call to .live(). Check out the API here: JQuery .live()

Chances are that you're going to want to do something a bit fancier with your titlebar (that's how i ended up here). I would suggest using jQuery's .load('FANCY-TITLEBAR.xml'); along with .append() instead of just .append('GIANT-BLOCK-OF-MARKUP);

This can be used a a solution to add images in trough the css. Below is an example of code that I used myself.

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;
});

Adding -dialogClass: 'dialoghelp'- made me able to customize dialog windows in the css in the following manner.

What you can do this way, is replacing the main .ui-dialog that is initially there, replace it with the custom class.

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

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

So I imagine, adding a image can be done trough this.

I've used a css style like this:

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

It's in a stylesheet I add after the jquery-ui.css

$("#myDialog").on("dialogopen", function (event, ui) {
  var w = $(this).dialog("widget");
  var t = $(".ui-dialog-title", w);
  var tb = $(".ui-dialog-titlebar", w);

  tb.append("<img src='test.png' id='replaceImage' />");
        
});