wake-up-neo.com

jQuery-UI-Dialogschaltflächenpositionierung

Wie kann ich die Tasten der jQuery-Benutzeroberfläche getrennt voneinander positionieren? Tasten sind in dieselbe Richtung ausgerichtet. Ich möchte, dass eine Taste nach links und die andere nach rechts ausgerichtet wird. Ist es möglich?

26
turezky

OK, schau dir das durch Firebug an ...

Das Dialog-Steuerelement erstellt ein div mit einer Klasse namens ui-dialog-buttonpane, damit Sie danach suchen können. 

Wenn Sie mehrere Schaltflächen verwenden, werden Sie wahrscheinlich :first- und :last-Attribute benötigen.

Daher sollte $(".ui-dialog-buttonpane button:first) Ihnen die erste Schaltfläche geben Und $(".ui-dialog-buttonpane button:last) sollte Sie die letzte Schaltfläche erhalten.

Von dort aus können Sie den CSS-Stil ändern, um die Schaltflächen nach rechts und links zu setzen (die Gleitkommawerte ändern).

Wie auch immer, so würde ich das jetzt angehen.

29
Chris Brandsma

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! Wichtige Flag hinzu, das benötigt wird, weil die Klasse zuerst kommt und von jquery überschrieben wird.

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

Ich habe die folgende Lösung gefunden (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
  • Es ist nicht erforderlich, eine feste Breite im Dialogfeld festzulegen (die Schaltfläche wird immer am linken Rand ausgerichtet, auch wenn der Benutzer die Größe des Dialogfelds ändert).
  • Die! Wichtige Flagge in CSS ist nicht erforderlich

Der von mir verwendete HTML-Code (leicht geändert aus 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 die Schaltfläche "leftButton" immer auf 8px vom linken Rand des Dialogfelds festgelegt ist, während die anderen Schaltflächen rechtsbündig sind. Wenn Sie mehr als eine Taste linksbündig haben, müssen Sie den linken Parameter um die Breite der vorherigen Tasten plus den gewünschten Abstand für jede Taste erhöhen, was meiner Meinung nach weniger elegant ist. Für einen einzelnen linksbündigen Button wirkt dies jedoch wie ein Zauber.

11
ibrewster

Sie müssen zunächst die Breite der .ui-dialog-buttonset in jquery-ui.css auf 100% ändern

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

Dann können Sie in Ihrer modalen Deklaration für Schaltflächen Folgendes explizit ausführen:

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

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

4
pashcan
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important;
  text-align:right;
}

.ui-button-left {
  float: left;
}

Dies hat keine Auswirkungen auf die Standardschaltflächen, sie werden rechts angezeigt. Sie können auch beliebig viele Schaltflächen links platzieren, ohne dass Sie für jede Schaltfläche eine spezielle Formatierung vornehmen müssen. Um die Klasse der linken Schaltflächen festzulegen, gibt es viele Möglichkeiten, dies zu tun.

Als Teil der Dialogdefinition:

$("#mydialog").dialog(
    {buttons: [
        {"class": "ui-button-left", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

Oder Sie können so etwas tun:

$("#mydialog").dialog(
    {buttons: [
        {"id": "myDeleteButton", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

Und später stylen Sie die CSS für das 'myDeleteButton'-Objekt so, dass sie nach links verschoben wird. Das Festlegen der Schaltflächen-ID kann hilfreich sein, wenn Sie die Schaltfläche auch anzeigen oder ausblenden möchten, ohne das Dialogfeld neu zu erstellen.

Getestet in Chrome, Safari, FF, IE11, jQuery UI 1.10

1
spekary

Versuchen Sie nach der Auswahl Folgendes:
.prependTo(".ui-dialog-buttonpane");

1
Falci

Ich fand, dass das .ui-Dialog-Buttonset sowieso ohne Breite zusammenbricht, um zwei Bottons in der unteren linken und rechten Ecke zu positionieren, die wie folgt hinzugefügt wurden:

.ui-dialog-buttonset {width:100%}
.ui-dialog-buttonset .ui-button:last-child {float:right !important;}

In der ersten Zeile wird der Button-Set-Container 100% breit, in der zweiten Zeile wird der zuletzt gefundene Button nach rechts gedrückt.

1
Shaun

Ich habe das gleiche Problem, aber ich habe die einfache Lösung gefunden, dass wir die Reihenfolge der Schaltflächen Ok ändern oder den Formulardialog schließen, wenn wir das Definitionsjquery-Ui-Dialogformular erstellen. 

1
nvtthang
$('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    text  : 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                space: { 
                    text  : '',
                    id : 'space',
                    width : '(the distance you want!)',
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });
$("#space").visibility("hidden");
0
user2653803

OK, Als @The Cooks Antwort können Sie diese CSS im Stil-Tag ändern. Denken Sie auf eine andere Weise.

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