How to add image to ui-dialog-titlebar in JQuery?
Sure. Making it pretty attractive in terms of size and alignment will be the tricky part. But placing the image in the header should be as simple as:
$(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");
Edit:
Based on what Nick said below (cheers), if you want to be really hardcore, you put the code inside the open event of the dialog, i.e .:
$(".putSelectorHere").dialog({
open: function(event, ui) {
$(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");
}
});
Click for related documents.
a source to share
if you use
$(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");
in an open event then remove felix.gif first
$(".ui-dialog-titlebar").remove("#myNewImage");
because if you open the dialog more than once, it will add the same image more than once or destroy the dialog
a source to share
These are all really good answers. I felt like one small and important function was missing, so I am throwing my solution.
you can "bind" the code to the event. I am lazy, so I use the convenience binding .live (). this allows me to drop all specialized codes anywhere.
Try to use
<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 img id to manage all relevant CSS to make it look good.
This can be cleared up if you put the 'createdialog' and 'click' events in a single .live () call. Check out the API here: jQuery.live ()
You will most likely want to do something a little more interesting with your title (this is how I ended up here). I would suggest using jQuery .load('FANCY-TITLEBAR.xml');
along with .append () instead of just.append('GIANT-BLOCK-OF-MARKUP);
a source to share
This can be used to add images via css. Below is a sample code 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'- allowed me to customize dialog boxes in css like this.
What you can do this way, replace the main .ui dialog that was originally there, replace it with a 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 suppose adding an image can be done through this.
a source to share