Wie kann ich die Größe NUR horizontal oder vertikal mit jQuery UI Resizable ändern?

81

Die einzige Lösung, die ich gefunden habe, besteht darin, die maximale und minimale Höhe oder Breite mit dem aktuellen Wert festzulegen.

Beispiel:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

Aber das ist wirklich hässlich, besonders wenn ich die Höhe des Elements programmgesteuert ändern muss.

jquery jquery-ui jquery-ui-resizable Diego
quelle

Antworten:

144

Sie konnten die Größe ändern gesetzt handlesOption zeigen nur auf der linken und rechten (oder Ost / West), wie folgt aus :

foo.resizable({
    handles: 'e, w'
});​

Hier können Sie es versuchen.

Nick Craver
quelle
7
Ich habe gerade eine Einschränkung mit dieser Lösung gefunden. Die Breite und Höhe wird weiterhin als Inline-Stil angegeben. Dies verursacht mir Probleme mit einer nur vertikalen Lösung. Sobald ich die Größe geändert habe, wird die Breite festgelegt und beträgt nicht mehr 100% (sondern einen px-Wert). Setzen Sie dies einfach hier ein, falls andere suchen und darauf stoßen.
Fernker
@Fernker Ja, das ist ein Schmerz.
Ben
Sie können eine prozentuale Breite zurückerhalten, wenn Sie Ihrem div Eigenschaften für die minimale und maximale Breite mit demselben Wert zuweisen. Es wird nicht überschrieben :)
Sébastien
2
Der Shift-Drag-Test schlägt fehl.
nichts ist
@nothingisnecessary kannst du den "Shift-Drag-Test" beschreiben?
Jon z
27

Während das Poster hauptsächlich nach einer nur horizontalen Größenänderung fragte, fragt die Frage auch nach vertikaler Größe.

Der vertikale Fall hat ein besonderes Problem: Möglicherweise haben Sie eine relative Breite (z. B. 50%) festgelegt, die Sie beibehalten möchten, auch wenn die Größe des Browserfensters geändert wird. Die jQuery-Benutzeroberfläche legt jedoch eine absolute Breite in px fest, sobald Sie die Größe des Elements zum ersten Mal ändern und die relative Breite verloren geht.

Wenn der folgende Code für diesen Anwendungsfall gefunden wurde:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

Siehe auch http://jsfiddle.net/cburgmer/wExtX/ und jQuery UI-Größenänderung: Automatische Höhe, wenn nur der Ostgriff verwendet wird

cburgmer
quelle
2
Sehr interessant, danke. Ich merke es mir. Ich denke, es ist wichtig zu bemerken, dass die Größe des veränderbaren Elements durch CSS festgelegt werden muss, wenn es nicht nach der Größenänderung verloren geht. Siehe hier jsfiddle.net/paska/wExtX/10
Diego
1
Dies ist die Lösung, nach der ich gesucht habe. Obwohl das Handle für die Region deaktiviert ist, scheinen die Abmessungen aus irgendeinem Grund immer noch auf px eingestellt zu sein. Wenn Sie diese Methode nicht verwenden, verlieren Sie Ihre prozentuale Höhe oder Breite.
Serhiy
Tatsächlich scheint dies in jQuery-ui 1.11.0 nicht zu funktionieren. Die direkt auf dem Element festgelegte CSS-Breite wird nicht von der Anfangsbreite übernommen. Ich versuche, die Breite auf einen Prozentsatz festzulegen, und sie wird mit einer Anzahl von überschrieben px.
Ben
Vielen Dank, dieser Trick hat sich auch als nützlich erwiesen, um das 'Shift-Drag' zu ignorieren, das das Seitenverhältnis beim Ändern der Größe beibehält (für horizontale Größenänderung setzen Sie CSS in den Handlern heightauf und Handler)''resizestop
nichts ist
18

Eine sehr einfache Lösung: 

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

Dies funktioniert auch für draggable (). Beispiel: http://jsfiddle.net/xCepm/

Jan.
quelle
1
Es ist wirklich hässlich !! Die richtige Lösung (die, die wir verwenden sollen) ist @Nick Craver's
Diego
1
Genau! :-) Aber es ist schön, dass es mit resizable () und draggable () funktioniert.
Januar
1
Ich mag diesen! Abgesehen davon, dass es mathematisch cool ist, bleibt der Griff in der unteren rechten Ecke und gibt einen visuellen Hinweis darauf, dass die Größe des Elements geändert werden kann. In der akzeptierten Lösung ist das Größenänderungshandle ausgeblendet, und der Benutzer muss raten, dass der untere Rand ein Hot Spot ist.
Corwin.amber
Dies ist perfekt aus den Gründen @ corwin.amber angegeben
Lombas
Das war perfekt für meine Bedürfnisse:{handles: 'se', grid: [10000, 1], autoHide: true}
Elektrotyp
9

Die Lösung besteht darin, Ihre Größenänderung so zu konfigurieren, dass Änderungen der nicht gewünschten Dimension abgebrochen werden.

Hier ist ein Beispiel für die vertikale Größenänderung:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});
Lambder
quelle
Wäre das nicht auch irgendwie hässlich?
Diego
1
Auf diese Weise sieht der Benutzer ein Handle, das er nicht verwenden kann.
Nima
1

Ich wollte eine Größenänderung der Breite zulassen, wenn der Browser die Größe ändert, aber nicht, wenn der Benutzer die Größe des Elements ändert. Dies funktionierte einwandfrei:

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});
Farhad Malekpour
quelle
0

Für mich resizefunktionierten Lösungen mit beiden Griffen und dem Handler einwandfrei, sodass der Benutzer den Griff sieht, aber nur die Größe horizontal ändern kann. Eine ähnliche Lösung sollte für die Vertikale funktionieren. Ohne den Handler unten rechts weiß der Benutzer möglicherweise nicht, dass er die Größe des Elements ändern kann.

Bei Verwendung funktioniertui.size.height = ui.originalSize.height; es nicht richtig, wenn das Element seine Größe vom Ausgangszustand geändert hat.

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

Für eine bessere Leistung $(this)könnte entfernt werden:

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

quelle
0 
Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

        $( ".resizable" ).resizable({
            grid: [10000, 1]
        });

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

    <body>
    <div class="resizable"></div>
    <div class="resizable-x"></div>
    </body>
Vinod Kumar
quelle