Wie kann man die Größe von ONLY horizontal oder vertikal mit jQuery UI Resizable ändern?

Question

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

例

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

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

Answer 1

Sie können die Größenänderung einstellen handles Option nur auf der linken und rechten Seite (oder Ost/West) anzeigen, etwa so:

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

Sie können es hier ausprobieren.

Answer 2

Der Poster hat zwar hauptsächlich nach einer horizontalen Größenänderung gefragt, aber die Frage bezieht sich auch auf die vertikale Größe.

Ein besonderes Problem stellt der vertikale Fall dar: Möglicherweise haben Sie eine relative Breite (z. B. 50 %) festgelegt, die auch dann beibehalten werden soll, wenn die Größe des Browserfensters geändert wird. Allerdings setzt jQuery UI eine absolute Breite in px, sobald Sie die Größe des Elements zum ersten Mal ändern, und die relative Breite geht verloren.

Wenn der folgende Code für diesen Anwendungsfall funktioniert:

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

Siehe auch http://jsfiddle.net/cburgmer/wExtX/ y jQuery UI resizable : automatische Höhe bei Verwendung von East Handle allein

Answer 3

Eine sehr einfache Lösung:

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

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

Answer 4

Die Lösung besteht darin, die Größenanpassung so zu konfigurieren, dass sie Änderungen der nicht gewünschten Dimensionen rückgängig macht.

Hier ist ein Beispiel für eine nur vertikal veränderbare Größe:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});

Answer 5

Ich wollte die Breite neu skalieren, wenn der Browser neu skaliert, aber nicht, wenn der Benutzer die Größe des Elements ändert, das funktionierte gut:

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