web-dev-qa-db-fra.com

Boutons de dialogue jQuery Ui, Comment ajouter une classe?

J'ai trouvé cette réponse sur un autre fil ..

Comment ajouter plusieurs boutons dans la boîte de dialogue Jquery UI?

En utilisant cette syntaxe, comment ajoutez-vous une classe à un bouton particulier?

 $("#mydialog").dialog({
      buttons: {
        'Confirm': function() {
           //do something
           $(this).dialog('close');
        },
        'Cancel': function() {
           $(this).dialog('close');
        }
      }
    });
jqueryjquery-uiuser-interfacedialogjquery-ui-dialog
50
gerky

Il ne semble pas qu'il existe un excellent moyen de le faire via l'API, mais vous pouvez ajouter les classes dans un gestionnaire d'événements pour create :

$("#dialog").dialog({
    buttons: {
        'Confirm': function() {
            //do something
            $(this).dialog('close');
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    },
    create:function () {
        $(this).closest(".ui-dialog")
            .find(".ui-button:first") // the first button
            .addClass("custom");
    }
});

Si vous vouliez le deuxième bouton, vous pouvez utiliser:

$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button

La clé est la $(this).closest(".ui-dialog").find(".ui-button"), qui sélectionnera les boutons dans votre boîte de dialogue. Après cela, vous pouvez appliquer n'importe quel sélecteur de votre choix (y compris :contains(...) qui pourrait être utile si vous souhaitez sélectionner un bouton en fonction de son texte au lieu de son ordre).

Voici un exemple: http://jsfiddle.net/jjdtG/

Notez également que le sélecteur CSS pour les styles que vous souhaitez appliquer doit être plus spécifique que les sélecteurs intégrés de jQueryUI pour que le style soit appliqué.

49
Andrew Whitaker

Vous pouvez ajouter une classe aux boutons dans la boîte de dialogue ... par

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

Je pense que cela fonctionnera pour vous. et vous pouvez trouver plus de réponses ici .

84
Imran Khan

J'espère que cela vous aidera!

$("#mydialog").dialog({
          buttons: {
            'Confirm': function() {
               //do something
               $(this).dialog('close');
            },
            "Cancel": {
                    click: function () {
                        $(this).dialog("close");
                    },
                    text: 'Cancel',
                    class: 'custom-class'
                }
          }
        });
42
LintonB

Utilisez le gestionnaire d'événements ouvert:

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

Propre, simple, morceau de gâteau!

7
bpeterson76

Grâce à LintonB, vous pouvez ajouter toutes les propriétés attachées à un bouton comme le style, l'identifiant, etc ...

dialog_options.buttons = {
  'Modify': {
    click: function() {

      $(this).dialog('close');

      if (inputs.phone !== '') {
        inputs.phone.focus();
        inputs.phone[0].value = "";
      }
    },
    class: 'btn btn-labeled btn-warning',
    style: 'margin-right: 30px;',
    id: 'modificationId'
  },
  'Keep': {
    click: function() {
      $(this).dialog('close');

      _this.validatePhone(i);

    },
    class: 'btn btn-labeled btn-warning',
    id: 'conserverId'
  }
};
2
GeooffreyA