wake-up-neo.com

Wie kann ich die Größe NUR horizontal oder vertikal ändern?

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

Beispiel:

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

Das ist aber wirklich hässlich, vor allem wenn ich die Höhe des Elements programmgesteuert ändern muss.

79
Diego

Sie können die handles-Option für die Größenänderung so einstellen, dass sie nur links und rechts (oder nach Osten/Westen) angezeigt wird:

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

Sie können es hier versuchen.

138
Nick Craver

Während das Poster hauptsächlich nach einer Nur-Horizontal-Größenänderung fragte, fragt die Frage auch nach der Vertikalen.

Der vertikale Fall hat ein besonderes Problem: Sie haben möglicherweise 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, wenn Sie die Größe des Elements zum ersten Mal ändern und die relative Breite verloren geht.

Wenn gefunden wurde, dass 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/ und jQuery UI veränderbare Größe: Auto Höhe bei Verwendung des East-Handleins allein

25
cburgmer

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/

16
Jan

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

hier ist ein Beispiel von nur vertikal veränderbarer Größe:

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

Ich wollte zulassen, dass die Breite geändert wird, wenn der Browser die Größe ändert, aber nicht, wenn der Benutzer die Größe des Elements ändert.

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

Für mich haben Lösungen mit beiden Handles und resize Handler gut funktioniert, so dass der Benutzer den Handle sieht, aber nur die Größe horizontal ändern kann. Eine ähnliche Lösung sollte für die Vertikale funktionieren. Ohne rechten unteren Handler Benutzer ist möglicherweise nicht bewusst dass er die Elementgröße ändern kann.

Bei Verwendung von ui.size.height = ui.originalSize.height; wird nicht richtig funktionieren / wenn das Element seine Größe vom ursprünglichen Zustand 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", '');
    }
});

Zur Verbesserung der Leistung konnte $(this) 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", '');
    }
});
0
user133408
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>
0
Vinod Kumar