web-dev-qa-db-fra.com

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

J'utilise des boîtes de dialogue jquery ui dans mon application . Comment attribuer un style différent aux boutons "Enregistrer" et "Annuler" dans une boîte de dialogue jquery? Je pourrais utiliser un hyperlien pour "Annuler", mais comment puis-je le placer dans le même panneau de boutons?

jqueryjquery-uijquery-ui-dialog
47
Sabya

Voici comment ajouter des classes personnalisées dans la boîte de dialogue jQuery UI (version 1.8+):

$('#foo').dialog({
    'buttons' : {
        'cancel' : {
            priority: 'secondary', class: 'foo bar baz', click: function() {
                ...
            },
        },
    }
});
53
Andriy Tkach

Dans jQueryUI 1.8.9, utiliser className au lieu de classes fonctionne.

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

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!

16
daveoncode

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')}
    }
  ]
});
11
maxp

À 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
          }
      }
});
10
MattPII

Ces solutions sont très bien si vous n’avez qu’une boîte de dialogue à la fois dans la page, mais si vous souhaitez styliser plusieurs boîtes de dialogue à la fois, essayez:

$("#element").dialog({
    buttons: {
        'Save': function() {},
        'Cancel': function() {}
    }
})
.dialog("widget")
.find(".ui-dialog-buttonpane button")
.eq(0).addClass("btnSave").end()
.eq(1).addClass("btnCancel").end();

Au lieu de sélectionner globalement des boutons, l'objet de widget est trouvé et son panneau de boutons est ensuite stylisé individuellement. Cela évite beaucoup de difficultés lorsque vous avez plusieurs boîtes de dialogue sur une page. 

7
Angry Dan

après avoir examiné d'autres discussions j'ai proposé cette solution pour ajouter des icônes aux boutons d'une boîte de dialogue de confirmation, qui semble bien fonctionner dans la version 1.8.1 et peut être modifiée pour effectuer un autre style:

$("#confirmBox").dialog({
    modal:true,
    autoOpen:false,        
    buttons: { 
        "Save": function() { ... },                
        "Cancel": function() { ... }
        }
});

var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");

Je serais intéressé de voir s'il y avait une meilleure façon de le faire, mais cela semble assez efficace.

4
paul

J'ai dû utiliser la construction suivante dans jQuery UI 1.8.22:

var buttons = $('.ui-dialog-buttonset').children('button');
buttons.removeClass().addClass('button');

Cela supprime toute la mise en forme et applique le style de remplacement en fonction des besoins.
Fonctionne dans la plupart des principaux navigateurs.

2
JonnyDotNet

J'ai la version 1.8.11 de JQuery UI et ceci est mon code de travail. Vous pouvez également personnaliser sa hauteur et sa largeur en fonction de vos besoins.

$("#divMain").dialog({
    modal:true,
    autoOpen: false,
    maxWidth: 500,
    maxHeight: 300,
    width: 500,
    height: 300,
    title: "Customize Dialog",
        buttons: {
            "SAVE": function () {
                //Add your functionalities here
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        },
        close: function () {}
});
1
Willy David Jr

Cette fonction ajoutera une classe à chaque bouton de votre boîte de dialogue. Vous pouvez ensuite styler (ou sélectionner avec jQuery) comme d'habitude:

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,''));
});
1
Paul Lorentzen

jetez un oeil à jquery ui 1.8.5 qui est disponible ici http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js et il a le nouveau bouton pour la mise en œuvre de l'interface utilisateur de dialogue

0
Ionut Popa