Appliquer le style CSS de jQuery Boutons du Dialogue

Question

Actuellement j'ai un jQuery boîte de dialogue avec deux boutons: Enregistrer et Fermer. J'ai créer la boîte de dialogue à l'aide du code ci-dessous:

$dialogDiv.dialog({
	autoOpen: false,
	modal: true,
	width: 600,
	resizable: false,
	buttons: {
		Cancel: function() {
                        // Cancel code here
		},
		'Save': function() {
                        // Save code here
		}
	},
	close: function() {
		// Close code here (incidentally, same as Cancel code)
	}
});

Cependant, les deux boutons sont de la même couleur lorsque ce code est utilisé. J'aimerais que mon bouton Annuler pour être d'une couleur différente de celle de mon Enregistrer. Est-il un moyen de le faire à l'aide de certaines construit en jQuery? Je n'ai pas eu beaucoup d'aide de la documentation.

Notez que le bouton Annuler, je suis en cours de création est un pré-définis, mais "Enregistrer" je suis la définition de moi-même. Pas sûr que cela n'aura aucune incidence sur la question.

Toute aide serait appréciée. Merci.

Mise à JOUR: le Consensus est qu'il y a deux routes pour aller ici:

1. Inspecter le code HTML à l'aide de Firefox plugin comme firebug, et note les classes CSS que jQuery est l'application pour les boutons, et de prendre un coup de couteau à leur remplaçant. Remarque: dans mon code HTML, les deux boutons sont utilisés de la exactement la même classes CSS et non unique Id, de sorte que cette option a été.
2. Utiliser un sélecteur jQuery sur la boîte de dialogue ouvrir pour attraper le bouton que je voulais, et d'ajouter une classe CSS à l'époque.

Je suis allé avec la deuxième option, et utilisé jQuery méthode find() que je pense que c'est plus approprié que celui de l'aide :premier ou première enfant b/c la touche que je voulais changer n'est pas forcément le premier bouton figurant dans le balisage. L'aide de la recherche, je peux juste indiquer le nom de la touche, et ajouter la feuille CSS de cette façon. Le code que j'ai terminé avec est ci-dessous:

$dialogDiv.dialog({
	autoOpen: false,
	modal: true,
	width: 600,
	resizable: false,
	buttons: {
		Cancel: function() {
                        // Cancel code here
		},
		'Save': function() {
                        // Save code here
		}
	},
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
	close: function() {
		// Close code here (incidentally, same as Cancel code)
	}
});

Answer 1

Je suis reposter ma réponse à une question similaire, parce que nul ne semble avoir donné ici et c'est beaucoup plus propre et plus lisible:

Utiliser les alternatives buttons syntaxe de la propriété:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Answer 2

Vous pouvez utiliser le gestionnaire d'événements ouvrir à appliquer du style:

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

Answer 3

Je pense qu'il y a deux façons dont vous pouvez gérer:

1. Vérifier à l'aide de quelque chose comme firebug si il y a une différence (dans la classe, id, etc.) entre les deux boutons et l'utiliser pour l'adresse de bouton spécifique
2. Utilisez quelque chose comme :premier enfant pour sélectionner par exemple le premier bouton et le style que l'on différemment

Quand je regarde la source avec firebug pour une de mes boîtes de dialogue, il se présente quelque chose comme:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

Donc je pourrais par exemple l'adresse de le bouton d'envoi par l'ajout de certains styles .ui-state-focus (avec peut-être des sélecteurs supplémentaires pour s'assurer que j'remplacer jquery styles).

Par la voie, Id aller pour la deuxième option, dans ce cas, pour éviter des problèmes lors de la mise au point change...

Answer 4

Vous devez changer le mot "className" pour "la classe"

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

Answer 5

Sélectionnez la div qui a pour rôle de boîte de dialogue, puis obtenir les boutons appropriés dans la liste et définissez les CSS.

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red");