jQuery ui boîte de dialogue ajouter une icône d'aide dans la barre de titre

Je voudrais ajouter une icône d'aide dans la barre de titre (à droite) de JQuery UI boîte de dialogue.

J'ai commencé à partir de la boîte de dialogue par défaut de démonstration

$('span.OK').click(function() {
    setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);
});

ici est le violon
http://jsfiddle.net/survivant/cyFxp/3/

J'ai trouvé qu'il y a un défaut sur l'icône d'aide dans le thème, mais je ne suis pas sûr de la façon de les afficher dans la barre de titre.

Le but est d'avoir un ? (aide) bouton d'affichage à côté de la X bouton de fermeture. Quand je clique dessus, je veux une fenêtre pour l'ouvrir (probablement une autre boîte de dialogue), pour afficher l'aide.

MODIFIER

Merci pour les réponses, j'ai maintenant une icône d'aide qui va afficher un message d'alerte lorsque l'utilisateur clique dessus. Toutefois, lorsque vous passez la souris sur cette icône, le curseur est un "move", le curseur au lieu d'un "pointeur" curseur comme le bouton fermer.

Comment puis-je faire éviter le "déplacer" curseur en faveur de la "pointeur" curseur?

PS. la démo dans la réponse ci-dessous fonctionne dans jsbin, mais mon démo en jsfiddle ne fonctionne pas.

Vous pouvez utiliser cette INTERFACE utilisateur de JQuery plugin: github.com/ExSoax/jQuery-UI-Dialog-Custom-Titlebar

OriginalL'auteur Sebastien Dionne | 2013-04-10

7

Vous pouvez utiliser dialogClass propriété de jquery dialogue de l'interface utilisateur de donner une classe à votre boîte de dialogue. Que vous pouvez rechercher pour la classe et ajouter ui-icon-help les boîtes de dialogue barre de titre. Vérifiez ce violon:

Démo de violon

Maintenant, vous pouvez définir les événements nécessaires sur l'icône en fonction de votre besoin.

Espère que c'est ce que vous cherchez!

MODIFIER

J'ai vérifié votre violon et de la mise à jour, vérifiez ceci :

Mis à jour le violon

presque, si je veux ajouter un gestionnaire d'événements sur ce nouvel espace, le hover afficher le curseur de Déplacement. J'ai été en mesure d'afficher un popup avec ce $("#iconhelp").cliquez sur(function(){ alert ("aide");});
veuillez vérifier mes mises à jour répondre
merci, merci pour ce que va faire le travail. C'est très apprécié.

OriginalL'auteur Gaurav

Je sais que c'est un vieux thread, mais j'ai pensé que cela pourrait aider quelqu'un.

Si vous créez une boîte de dialogue à la volée (sans créer une boîte de dialogue à partir d'un élément HTML), de la façon la plus simple que j'ai trouvé est d'utiliser la boîte de dialogue "ouvrir" de l'événement (http://api.jqueryui.com/dialog/#event-open) à ajouter (ou ajouter) votre icône pour le titre.

L'exemple suivant utilise font-awesome icônes avec Twitter Bootstrap, mais vous pouvez utiliser une icône ou une image que vous voulez pour le myIcon variable:

var myIcon   =  '<i class="icon icon-flag-checkered icon-large pull-left"></i>';       
var myDialog = $('<div title="ALMOST DONE!">'
    + 'Your Text/HTML Here'
    + '</div>');
myDialog.dialog({
    resizable   : false,
    height      : 'auto',
    open        : function(){
        $(this)
        .parent()
        .children(".ui-dialog-titlebar")
        .prepend(myIcon);
    },
    buttons     : {
        "Any Button"    : function(){
            alert('Yep, you clicked it.')
        },
        "OK"    : function(){
            $(this).dialog('close');
        }
    }
});

exemple à jsfiddle: http://jsfiddle.net/drb26/2/

OriginalL'auteur user3037991

Vous devez vous connecter pour publier un commentaire.