It is possible to add an image to the ui-dialog-titlebar into a dialog box?.
+2
A:
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.
GlenCrawford
2010-05-10 06:56:15
Thanks, but it is not working.
Felix Guerrero
2010-05-10 07:35:27
@Felix Guerrero: when looking in Firebug, can you see the element inside the titlebar at all?
GlenCrawford
2010-05-10 07:38:42
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;"><span class="ui-dialog-title" id="ui-dialog-title-cardInfo" unselectable="on" style="-moz-user-select: none;">Card Info</span></div>this is what I get with Firebug.
Felix Guerrero
2010-05-10 07:49:25
@Felix - You have to run this code *after* creating the dialog, as the selector wouldn't find anything before then....because that `.ui-dialog-titlebar` element is created when the dialog is.
Nick Craver
2010-05-10 11:52:31
A:
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
Jason
2010-05-10 12:25:45