web-dev-qa-db-fra.com

Appliquer le CSS aux boutons de dialogue jQuery

J'ai donc actuellement une boîte de dialogue jQuery avec deux boutons: Enregistrer et Fermer. Je crée le dialogue en utilisant le 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 ont la même couleur lorsque ce code est utilisé. J'aimerais que mon bouton Annuler soit d'une couleur différente de celle de mon enregistrement. Y a-t-il un moyen de faire cela en utilisant certaines options intégrées de jQuery? La documentation ne m'a pas beaucoup aidé.

Notez que le bouton Annuler que je crée est un type prédéfini, mais "Enregistrer", je me définit. Je ne sais pas si cela aura une incidence sur la question.

Toute aide serait appréciée. Merci.

MISE À JOUR: Il y avait un consensus sur le fait qu'il y avait deux routes à parcourir ici:

  1. Inspectez le code HTML à l'aide d'un plugin Firefox tel que firebug , notez les classes CSS appliquées par jQuery aux boutons, puis tentez de les remplacer. Remarque: dans mon code HTML, les deux boutons utilisaient exactement les mêmes classes CSS et aucun ID unique. Cette option était donc désactivée.
  2. Utilisez un sélecteur jQuery dans la boîte de dialogue ouverte pour saisir le bouton que je voulais et ajoutez-y une classe CSS.

Je suis allé avec la deuxième option, et utilisé la méthode jQuery find () car je pense que cela est plus approprié que d'utiliser: first ou: first-child b/c le bouton que je voulais changer n'était pas nécessairement le premier bouton listé dans le balisage. En utilisant find, je peux simplement spécifier le nom du bouton et ajouter CSS de cette façon. Le code que j'ai fini 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)
    }
});
jquerycssjquery-uibuttondialog
77
MegaMatt

Je republie ma réponse à une question similaire car personne ne semble l’avoir donnée ici et c’est beaucoup plus propre et plus net:

Utilisez la syntaxe alternative de la propriété buttons:

$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)
    }
});
124
Raphael Schweikert

Vous pouvez utiliser le gestionnaire d'événements open pour appliquer un style supplémentaire:

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

Je pense que vous pouvez gérer cela de deux manières:

  1. Vérifiez en utilisant quelque chose comme firebug s'il y a une différence (en classe, id, etc.) entre les deux boutons et utilisez cela pour adresser le bouton spécifique
  2. Utilisez quelque chose comme: premier enfant pour sélectionner par exemple le premier bouton et styliser celui-ci différemment

Quand je regarde la source avec firebug pour un de mes dialogues, il en ressort 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>

Ainsi, je pourrais par exemple adresser le bouton Envoyer en ajoutant quelques styles à . Ui-state-focus (avec peut-être quelques sélecteurs supplémentaires pour être sûr de remplacer les styles de jquery).

En passant, je choisirais la deuxième option dans ce cas pour éviter les problèmes lorsque le focus change ...

6
jeroen

Vous devriez changer le mot "className" pour "class"

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

Sélectionnez la div qui a un dialogue de rôle, puis récupérez les boutons appropriés et définissez le CSS.

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

Peut-être quelque chose comme ça?

$('.ui-state-default:first').addClass('classForCancelButton');
3
Nick Spiers

Il existe également une réponse simple pour définir des styles spécifiques qui ne seront appliqués qu'à ce bouton spécifique et vous pouvez demander à Jquery de déclarer le style de l'élément lors de la déclaration de la boîte de dialogue:

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

après avoir fait cela, voici ce que montre le code HTML: enter image description here

faire cela vous permet de le définir, mais il n’est pas forcément facile de changer en utilisant jquery plus tard.

2
eragon2262

Pourquoi ne pas simplement inspecter le balisage généré, noter la classe sur le bouton de choix et la personnaliser vous-même?

1
rfunduk

Si rien ne fonctionne toujours pour vous, ajoutez les styles suivants à votre feuille de style de page

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

Cela changera la couleur de fond des boutons de dialogue.

0
Qammar Feroz

Je vous suggère de jeter un coup d'œil au code HTML généré par le code et de voir s'il existe un moyen d'identifier de manière unique l'un des boutons (ou les deux) (éventuellement les attributs id ou name), puis d'utiliser jQuery pour sélectionner cet élément et appliquer un paramètre. classe css à elle.

0
Rory