jquery - jQuery UI Resizableを使用して水平方向または垂直方向にのみサイズ変更するにはどうすればよいですか？

Question

私が見つけた唯一の解決策は、現在の値で最大と最小の高さまたは幅を設定することです。

例：

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

しかし、これは本当に醜いです。特に、プログラムで要素の高さを変更する必要がある場合はそうです。

score 147 · Accepted Answer

次のように、サイズ変更handlesオプションを左右 (または東/西) にのみ表示するように設定できます。

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

score 27 · Accepted Answer

ポスターは主に横方向のみのサイズ変更を求めていましたが、質問では縦方向も求めています。

垂直の場合には特別な問題があります。ブラウザーウィンドウのサイズが変更された場合でも保持したい相対的な幅 (たとえば 50%) を設定している可能性があります。ただし、最初に要素のサイズを変更すると、jQuery UI は絶対幅を px で設定し、相対幅は失われます。

このユースケースで次のコードが機能することがわかった場合:

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

http://jsfiddle.net/cburgmer/wExtX/およびjQuery UI resizingも参照してください: East ハンドルのみを使用する場合の自動高さ

score 17 · Accepted Answer

非常に簡単な解決策：

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

これは draggable() でも機能します。例: http://jsfiddle.net/xCepm/

score 9 · Accepted Answer

解決策は、サイズ変更可能を構成して、不要なディメンションの変更をキャンセルすることです。

垂直方向のみサイズ変更可能な例を次に示します。

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

7 に答える 7