wake-up-neo.com

jquery-Dialog zum Speichern der Schaltfläche "Abbrechen"

Ich verwende Jquery-Ui-Dialoge in meiner Anwendung. Wie stelle ich die Schaltflächen "Speichern" und "Abbrechen" in einem Jquery-Dialog anders ein? Daher ist "Speichern" ansprechender als "Abbrechen" .. .Ich könnte einen Hyperlink für "Abbrechen" verwenden, aber wie platziere ich das im selben Tastenfeld?

jqueryjquery-uijquery-ui-dialog
47
Sabya

So fügen Sie benutzerdefinierte Klassen in jQuery UI Dialog (Version 1.8 und höher) hinzu:

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

In jQueryUI 1.8.9 funktioniert className statt classes.

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

Ich verwende jQuery UI 1.8.13 und die folgende Konfiguration funktioniert nach Bedarf:

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

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

ps: Denken Sie daran, "class" in Anführungszeichen einzuhüllen, da es sich um ein reserviertes Word in js handelt!

16
daveoncode

Es ist eine Weile her, seit diese Frage veröffentlicht wurde, aber der folgende Code funktioniert in allen Browsern (beachten Sie, dass die Antwort von MattPII in FFox und Chrome funktioniert, es werden jedoch Skriptfehler im IE ausgelöst).

$('#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

Ab jquery ui Version 1.8.16 habe ich es funktioniert.

$('#element').dialog({
  buttons: { 
      "Save": {  
          text: 'Save', 
          class: 'btn primary', 
          click: function () {
              // do stuff
          }
      }
});
10
MattPII

Diese Lösungen sind alle sehr gut, wenn Sie nur ein Dialogfeld auf der Seite haben. Wenn Sie jedoch mehrere Dialoge gleichzeitig formatieren möchten, versuchen Sie Folgendes:

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

Anstatt die Schaltflächen global auszuwählen, wird das Widgetobjekt abgerufen, der Schaltflächenbereich gefunden und die Schaltflächen einzeln formatiert. Dies erspart Ihnen viele Schmerzen, wenn Sie mehrere Dialoge auf einer Seite haben 

7
Angry Dan

nachdem ich einige andere Threads angesehen hatte, kam ich zu dieser Lösung, um den Schaltflächen Symbole in einem Bestätigungsdialogfeld hinzuzufügen, was in Version 1.8.1 gut zu funktionieren scheint und für andere Formatierungen geändert werden kann:

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

Ich würde gerne wissen, ob es einen besseren Weg gibt, aber das scheint ziemlich effizient zu sein.

4
paul

Ich musste das folgende Konstrukt in der jQuery-Benutzeroberfläche 1.8.22 verwenden:

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

Dadurch werden alle Formatierungen entfernt und der Ersatzstil bei Bedarf angewendet.
Funktioniert in den meisten gängigen Browsern.

2
JonnyDotNet

Ich habe die JQuery UI 1.8.11-Version und dies ist mein Arbeitscode. Sie können auch die Höhe und Breite je nach Ihren Anforderungen anpassen.

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

Diese Funktion fügt jeder Schaltfläche in Ihrem Dialogfeld eine Klasse hinzu. Sie können dann wie üblich einen Stil erstellen (oder mit jQuery auswählen):

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

check out jquery ui 1.8.5 ist hier verfügbar http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js .__ Schaltfläche für die Implementierung der Dialogbenutzeroberfläche

0
Ionut Popa