2

サイズ変更可能なdivに異なる最大制約を指定します。たとえば、北方向に20ピクセル、南方向に200ピクセルの最大サイズ変更が必要です。

maxHeightを使用し、ハンドルを一方向に制限することで、一方向のみを簡単に実行できますが、両方を同時に管理することはできません。

それは絶対に不可能ですか？

4

1 に答える 1

5

jQueryとjQueryUIは同じではありません。

jQuery UIのサイズ変更可能なウィジェットには、一連のオプションがあります。お気づきのとおり、そのうちの1つはmaxHeightですが、 minHeightもあります。そしてもちろん、幅に相当します。

固定の高さのアイテム（100px）がある場合は、このコードを使用して、北に20px、南に200pxにすることができます。

$("#resizable").resizable(
{
    maxHeight: 300,
    minHeight: 80
});

これで、可変の高さがわからない場合は、jQueryでいつでも見つけることができます。

$("#resizable").resizable(
{
    maxHeight: parseInt($("#resizable").height(),10)+200,
    minHeight: parseInt($("#resizable").height(),10)-20
});

さらに良いことに、20px / 200pxのステップでサイズを変更できるようにしたい場合は、stopイベントを使用してみてください。

$("#resizable").resizable(
{
    maxHeight: parseInt($("#resizable").height(),10)+200,
    minHeight: parseInt($("#resizable").height(),10)-20,
    stop: function(event,ui)
    {
        $("#resizable").resizable("option","maxHeight",parseInt($("#resizable").height(),10)+200);
        $("#resizable").resizable("option","minHeight",parseInt($("#resizable").height(),10)-20);
    }
});

ここで、2つの異なるハンドルで高さを増やしたいが、別々の制限がある場合は、ハンドルのクラスを使用して別の制限を強制できます。

var originalHeight = parseInt($("#resizable").height(),10);
$("#resizable").resizable(
{
    maxHeight: originalHeight+20,
    minHeight: originalHeight, // decrease height impossible
    start: function(event,ui)
    {
        if($(event.originalEvent.target).hasClass('ui-resizable-s'))
        {
            $("#resizable").resizable("option","maxHeight",originalHeight+200);
        }
        else
        {
            $("#resizable").resizable("option","maxHeight",originalHeight+20);
        }
    }
});

後で要素のサイズを小さくしたくない場合は、stopイベントに次のようなものを追加することもできます。

,
stop: function()
{
    $("#resizable").resizable("option","minHeight",parseInt($("#resizable").height(),10));
}
于 2012-08-17T13:55:21.057 に答える