jquery Speichern-Dialog-Taste Styling Abbrechen

Question

Ich bin mit jQuery UI Dialoge in meiner Anwendung. Wie stylen ich die „Speicher“ und „Abbrechen“ Tasten anders in einem jquery Dialog? So „Speichern“ ist attraktiver als die „Abbrechen“. Ich könnte einen Hyper-Link für „Abbrechen“, verwende aber wie stelle ich, dass in dem gleichen Tastenfeld?

Answer 1

Hier ist, wie benutzerdefinierte Klassen in jQuery UI-Dialog (Version 1.8 +) hinzuzufügen:

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

Answer 2

In jQueryUI 1.8.9 mit className statt classes funktioniert.

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

Answer 3

Ich bin mit jQuery UI 1.8.13 und die folgenden Konfiguration arbeitet wie ich brauche:

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

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

ps: erinnern wickeln "Klasse" mit Anführungszeichen , weil es ein reserviertes Wort in js ist

Answer 4

Es ist schon eine Weile her, seit dieser Frage gestellt wurde, aber der folgende Code funktioniert in allen Browsern (man beachte, obwohl MattPII Antwort in FFox und Chrome funktioniert, wirft es Skriptfehler in 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

Wie von jQuery UI Version 1.8.16 unten ist, wie ich habe es funktioniert.

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

Answer 6

Diese Lösungen sind alle sehr gut, wenn Sie zu einem beliebigen Zeitpunkt einen Dialog auf der Seite haben, aber wenn Sie mehrere Dialoge auf einmal dann versuchen, stylen wollen:

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

Statt global Wahltasten, wird dies das Widget-Objekt und findet es Schaltfläche Bereich ist, dann einzeln Stile jede Taste. Das spart viel von Schmerzen, wenn Sie mehrere Dialoge auf einer Seite

haben

Answer 7

nach unter einige andere Threads Ich kam auf diese Lösung Symbole auf den Tasten in einem Bestätigungsdialog hinzuzufügen, die auch in der Version 1.8.1 scheint zu funktionieren und kann geändert werden, um andere Styling zu tun:

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

würde ich daran interessiert sein zu sehen, ob es eine bessere Art und Weise war es zu tun, aber dies scheint ziemlich effizient.

Answer 8

Ich hatte zu verwenden, die in jQuery UI konstruieren folgende 1.8.22:

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

Dies entfernt alle Formatierungen und wendet den Ersatz Styling nach Bedarf.
Funktioniert in den meisten gängigen Browsern.

Answer 9

Mit dieser Funktion wird eine Klasse für jede Taste in Sie im Dialogfeld hinzufügen. Anschließend können Sie Stil (oder wählen Sie mit jQuery) als normal:

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

Answer 10

Ich habe JQuery UI 1.8.11 Version und das ist mein Arbeitscode. Sie können auch seine 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 () {}
});

Answer 11

Besuche jQuery UI 1.8.5 es ist hier verfügbar http://ajax.googleapis.com/ajax/ libs / jQueryUI / 1.8.5 / jquery-ui.js und es hat die neue Schaltfläche für den Dialog ui Implementierung

Answer 12

Ich schaute auf der HTML durch den UI-Dialog erzeugt. Es macht Tasten Bereich wie folgt aus:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
     <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>

eine Klasse Hinzufügen Schaltfläche Abbrechen sollte einfach sein.

$ ( 'ui-Dialog-buttonpane: liest-child '). Css (' background-color', '#ccc');

Dies wird die kleine graue Abbrechen Taste. Sie können diese Schaltfläche Stil wie Sie wollen.

Vor Code geht davon aus, dass die Abbrechen-Taste die letzte Taste ist. Die narrensicher Weise zu tun, es wäre

$('.ui-dialog-buttonpane :button')
    .each(
        function()
        { 
            if($(this).text() == 'Cancel')
            {
                //Do your styling with 'this' object.
            }
        }
    );