wake-up-neo.com

jQuery Ui Dialog Buttons, Wie füge ich eine Klasse hinzu?

Ich habe diese Antwort in einem anderen Thread gefunden.

Wie füge ich mehrere Schaltflächen im Dialogfeld Jquery UI hinzu?

Wie können Sie mithilfe dieser Syntax einer bestimmten Schaltfläche eine Klasse hinzufügen?

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

Es sieht nicht so aus, als gäbe es eine großartige Möglichkeit, dies über die API zu tun. Sie könnten jedoch die Klassen in einem Ereignishandler für create hinzufügen:

$("#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");
    }
});

Wenn Sie den zweiten Knopf möchten, können Sie verwenden:

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

Die Taste ist die Funktion $(this).closest(".ui-dialog").find(".ui-button"), mit der die Schaltflächen in Ihrem Dialogfeld ausgewählt werden. Danach können Sie einen beliebigen Selektor anwenden (einschließlich :contains(...), was nützlich sein kann, wenn Sie eine Schaltfläche anhand ihres Texts anstelle ihrer Reihenfolge auswählen möchten).

Hier ist ein Beispiel: http://jsfiddle.net/jjdtG/

Beachten Sie auch, dass der CSS-Selektor für die Stile, die Sie anwenden möchten, spezifischer sein muss als die integrierten Selektoren von jQueryUI, damit das Styling angewendet wird.

49
Andrew Whitaker

Sie können den Schaltflächen in Dialog ... by eine Klasse hinzufügen

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

Ich denke, das wird für dich funktionieren. und Sie können weitere Antworten finden hier .

84
Imran Khan

Hoffe es wird helfen!

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

Verwenden Sie den offenen Ereignishandler:

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

Sauber, einfach, ein Kinderspiel!

7
bpeterson76

Dank LintonB können Sie alle Eigenschaften, die mit einer Schaltfläche verknüpft sind, wie Stil, ID usw., hinzufügen.

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