Positionierung der jQuery-UI-Dialogschaltfläche

Lesezeit: 4 Minuten

Wie kann ich Schaltflächen von jQuery UI getrennt voneinander positionieren. Die Schaltflächen sind in die gleiche Richtung ausgerichtet. Ich möchte, dass eine Schaltfläche nach links ausgerichtet wird, während die andere nach rechts ausgerichtet wird. Ist es möglich?

Benutzer-Avatar
Chris Brandma

OK, wenn ich mir das über Firebug anschaue …

Das Dialog-Steuerelement erstellt ein div mit einer aufgerufenen Klasse ui-dialog-buttonpanedamit Sie danach suchen können.

Wenn Sie es mit mehreren Schaltflächen zu tun haben, werden Sie wahrscheinlich möchten :first und :last Attribute.

So, $(".ui-dialog-buttonpane button:first) sollten Sie die erste Schaltfläche erhalten. und $(".ui-dialog-buttonpane button:last) sollten Sie den letzten Knopf bekommen.

Von dort aus können Sie den CSS/Stil ändern, um jede Schaltfläche rechts und links zu platzieren (ändern Sie die Float-Werte).

Jedenfalls würde ich das jetzt so angehen.

  • Erweitern Sie dann die Selektoren ein wenig. $(“div.dialog < .ui-dialog-buttonpane button:last) und $(""div.dialog < .ui-dialog-buttonpane button:first) sollten funktionieren. Der div.dialog sollte der Besitzer des Dialogs sein an erster Stelle.

    – Chris Brandsma

    27. Juni 2009 um 16:07 Uhr

  • Ich sehe dasselbe wie Brian C. Lane. Ich habe mehrere Dialoge auf der Seite und der Vorschlag von Chris funktioniert beim ersten einwandfrei, aber alle danach geöffneten Dialoge werden nicht korrekt ausgerichtet. Ich kann nicht herausfinden, warum. Ich nenne den Auswahlcode im Ereignis “Öffnen” des Dialogs, also würde ich denken, dass es funktionieren sollte … seltsam.

    – Nathan Beach

    3. Oktober 2012 um 21:05 Uhr

  • Ah, jetzt verstehe ich es. Wenn Sie den Buttonpane-Selektor ausführen, werden alle Schaltflächen auf der gesamten Seite gesammelt, sodass immer noch nur die erste Schaltfläche ausgeführt wird, die jemals von jQuery erstellt wurde. Ich mache jetzt so etwas und es funktioniert (den Bereich des Schaltflächensatzes eingrenzen): var form = $(“#” + dialogId); var buttonpane = $(form).nextAll(.ui-dialog-buttonpane”); var theButton = buttonpane.find(“button:first”); theButton.css(“float”, “left”);`

    – Nathan Beach

    3. Oktober 2012 um 21:45 Uhr


  • Ich denke, es ist nicht möglich, Zeilenumbrüche in Kommentaren zu machen – sorry, das sieht beschissen aus …

    – Nathan Beach

    3. Oktober 2012 um 21:48 Uhr

Benutzer-Avatar
Der Koch

Auf diese Weise konnte ich die Ergebnisse erzielen.

 $('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    class: 'leftButton',
                    text: 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });

Fügen Sie dann in Styles das Flag !important hinzu, das benötigt wird, da die Klasse zuerst kommt und von jquery überschrieben wird.

<style>
    .leftButton
    {
        margin-right: 170px !important;
    }
</style>

  • Wenn das obige Beispiel mit Ihrer Version von jQuery nicht funktioniert, gibt es ein ähnliches Beispiel (beantwortet von Raphael Schweikert) zu einer anderen Stackoverflow-Frage: Apply CSS to jQuery Dialog Buttons

    – Schade

    25. Juli 2013 um 16:28 Uhr


Ich landete bei der folgenden Lösung (basierend auf der Antwort von The Cook). Dies hat (für mich) eine Reihe von Vorteilen gegenüber den anderen Antworten:

  • Reines HTML/CSS – kein Javascript
  • Keine Notwendigkeit, eine feste Breite für das Dialogfeld festzulegen (Schaltfläche wird immer am linken Rand ausgerichtet, auch wenn der Benutzer die Größe des Dialogfelds ändert)
  • Keine Notwendigkeit für das !important-Flag im CSS

Das HTML, das ich verwendet habe (leicht modifiziert von der Antwort von The Cook):

$('#dialog-UserDetail').dialog({
        autoOpen: false,
        width: 'auto',
        modal: true,
        buttons: {
            DelUser:{ 
                class: 'leftButton',
                text: 'Delete User',
                click : function (){
                    alert('delete here');
                }
            },
            "Update User": function () {
                   alert('update here');
       },
            Close: function () {
                $(this).dialog("close");
            }
        }
    });

Dann habe ich folgendes CSS verwendet:

.leftButton
{
    position: absolute;
    left:8px;
}

Mit dem Ergebnis, dass der “leftButton”-Button immer 8px vom linken Rand des Dialogs entfernt ist, während die anderen Buttons rechtsbündig angeordnet sind. Wenn Sie mehr als eine Schaltfläche haben, die Sie linksbündig ausrichten müssen, müssen Sie den linken Parameter um die Breite der vorherigen Schaltflächen plus den gewünschten Abstand für jede Schaltfläche erhöhen, was meiner Meinung nach weniger elegant ist. Für eine einzelne linksbündige Schaltfläche funktioniert dies jedoch wie ein Zauber.

Sie könnten Ihrem Dialog auch eine Klasse hinzufügen (http://docs.jquery.com/UI/Dialog#option-dialogClass), um Ihr Styling zu lokalisieren.

Sie müssten zuerst die Breite von .ui-dialog-buttonset in jquery-ui.css auf 100% ändern

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%;}

Dann könnten Sie in Ihrer modalen Deklaration für Schaltflächen etwas explizites wie folgt tun:

buttons: [
        {
           text: "Close",
           open: function(){
                        $(this).css('float','left');}, 
                  }
        }
             ]

Benutzer-Avatar
lwin

Ok, als Antwort von @The Cook können Sie dieses CSS im Stil-Tag ändern. Denken Sie anders. Sie können Stil innerhalb der Schaltfläche hinzufügen, kein CSS mehr erforderlich. Viel Glück.

                      "Ok":{                                
                            style:"margin-right:640px",                                
                            click: function () {
                                //Your Code 
                            }
                        },

Benutzer-Avatar
nvtthang

Ich habe das gleiche Problem, aber ich habe die einfache Lösung gefunden, dass wir die Reihenfolge der Schaltflächen Ok oder das Schließen des Formulardialogs ändern, wenn wir das Dialogformular für die Definition jquery ui erstellen.

1186210cookie-checkPositionierung der jQuery-UI-Dialogschaltfläche

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy