web-dev-qa-db-ja.com

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

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

例：

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

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

jqueryjquery-uijquery-ui-resizable
80
Diego

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

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

ここで試してみることができます

139
Nick Craver

ポスターは主に水平方向のみのサイズ変更を要求していましたが、質問は垂直方向も要求しています。

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

このユースケースで機能する次のコードが見つかった場合：

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

http://jsfiddle.net/cburgmer/wExtX/ および jQuery UIのサイズ変更可能：東ハンドルのみを使用する場合の自動高さ

27
cburgmer

非常に簡単な解決策：

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

これはdraggable（）でも同様に機能します。例： http://jsfiddle.net/xCepm/

16
Jan

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

以下は、垂直方向にのみサイズ変更可能な例です。

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

ブラウザのサイズ変更時に幅のサイズ変更を許可したかったのですが、ユーザーが要素のサイズを変更したときではなく、これはうまくいきました：

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

私にとっては、ハンドルとresizeハンドラーの両方を備えたソリューションは正常に機能したため、ユーザーはハンドルを見ることができますが、水平方向にのみサイズ変更できます。右下のハンドラーがなければユーザーは気付かないかもしれません要素のサイズを変更できます。

_ui.size.height = ui.originalSize.height;_を使用する場合、正しく動作しない要素が変更された場合、初期状態からのサイズになります。

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

パフォーマンスを向上させるために、$(this)を削除できます。

_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