Boîte de dialogue jQuery Enregistrer le style du bouton Annuler

Question

J'utilise jquery ui dialogues dans mon application. Comment nommer différemment les boutons "Enregistrer" et "Annuler" dans une boîte de dialogue jQuery? Donc, "Enregistrer" est plus attrayant que le "Annuler". Je pourrais utiliser un hyperlien pour "Annuler", mais comment puis-je le placer dans le même panneau de boutons?

Answer 1

L'exemple suivant montre comment ajouter des classes personnalisées dans la boîte de dialogue jQuery UI Dialog (version 1.8 +):

 $('#foo').dialog({

    'buttons' : {

        'cancel' : {

            priority: 'secondary', class: 'foo bar baz', click: function() {

                ...

            },

        },

    }

}); 
 

Answer 2

Dans jQueryUI 1.8.9, utiliser className plutôt que classes fonctionne.

 $('#element').dialog({
  buttons:{
    "send":{
      text:'Send',
      class:'save'
    },
    "cancel":{
      text:'Cancel',
      class:'cancel'
    }
  });
 

Answer 3

J'utilise jQuery UI 1.8.13 et la configuration suivante fonctionne selon mes besoins:

 var buttonsConfig = [
    {
        text: "Ok",
        "class": "ok",
        click: function() {
        }
    },
    {
        text: "Annulla",
        "class": "cancel",
        click: function() {
        }
    }
];

$("#foo").dialog({
    buttons: buttonsConfig
// ...
 

ps: n'oubliez pas d'envelopper "class" avec des guillemets car c'est un mot réservé en js!

Answer 4

Cela fait longtemps que cette question n’a pas été publiée, mais le code suivant fonctionne sur tous les navigateurs (remarque bien que la réponse de MattPII fonctionne dans FFox et Chrome, elle génère des erreurs de script dans IE).

 $('#foo').dialog({
    autoOpen: true,
    buttons: [
    {
        text: 'OK',
        open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button.
        click: function() { alert('OK Clicked')}
    },
    {
        text: "Cancel",
        click: function() { alert('Cancel Clicked')}
    }
  ]
});
 

Answer 5

À partir de la version 1.8.16 de jquery ui ci-dessous, voici comment je le fais fonctionner.

 $('#element').dialog({
         buttons: { "Save": {  text: 'Save', 
                               class: 'btn primary', 
                               click: function () {

                                    // do stuff
                                }
                   }
});