Comment ajouter une image à la barre de dialogue ui-dialog-dans JQuery?

Question

Il est possible d'ajouter une image à la barre de titre de ui-dialog dans une boîte de dialogue.

Answer 1

C'est sûr. Le rendre joli en termes de taille et d'alignement sera la partie difficile. Mais placer une image dans la barre de titre doit être aussi simple que:

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

Edit:
bâtiment sur ce que Nick dit ci-dessous (applaudissements), si vous voulez être vraiment hardcore, vous placeriez le code dans l'événement d'ouverture de la boîte de dialogue, à savoir:

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

Click pour docs pertinents.

Answer 2

Je l'ai utilisé un style css comme ceci:

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

Il est dans une feuille de style ajouter après la jquery-ui.css

Answer 3

Ce sont toutes les réponses vraiment bons. Je me sentais comme une fonctionnalité petite et importante a été manquée alors je jette dans ma solution.

Vous pouvez 'lier' le code à un événement. Je suis paresseux, donc j'utilise la liaison de commodité .live(). Cela me permet de lancer tout le code spécialisé partout.

Essayez d'utiliser cette

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

puis utilisez l'ID img pour manipuler tous les CSS pertinentes pour le faire paraître bon

Cela peut être nettoyé si vous mettez deux « CreateDialog » et « cliquez sur » événements en un appel à .live(). Consultez l'API ici: JQuery .live()

Il y a des chances que vous vouliez faire quelque chose d'un peu plus sophistiqué avec votre barre de titre (c'est comme ça que je me suis retrouvé ici). Je suggère d'utiliser .load('FANCY-TITLEBAR.xml'); de jQuery avec .append() au lieu de seulement .append('GIANT-BLOCK-OF-MARKUP);

Answer 4

Cela peut être utilisé comme une solution pour ajouter des images dans le css. Voici un exemple de code que j'ai utilisé moi-même.

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

Ajout -dialogClass: « dialoghelp'- m'a fait en mesure de personnaliser les fenêtres de dialogue dans le css de la manière suivante.

Ce que vous pouvez faire de cette façon, c'est de remplacer la boîte de dialogue principale .ui qui est initialement là, remplacez-la par la classe personnalisée.

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

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

Donc j'imagine que l'ajout d'une image peut être fait à travers ceci.

Answer 5

si vous utilisez

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

sur l'événement ouvert puis retirez d'abord felix.gif

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

parce que si vous ouvrez la boîte de dialogue plus d'une fois, il ajoutera même image plus d'une fois ou détruire la boîte de dialogue