1

いくつかの div(兄弟) があり、そのうちの 1 つをドラッグしてサイズ変更すると、西または東にサイズ変更されているかどうかに応じて、他のすべての兄弟の幅をそれに応じて増減したいと思います。 ここに画像の説明を入力

$(function () {
    var west;
    var east;
    var clientX;

    $("#resizable1").resizable({
        start: function (event, ui) {
             west = $(event.srcElement).hasClass('ui-resizable-w');
             east = $(event.srcElement).hasClass('ui-resizable-e');
             clientX = event.clientX;
        },
        resize: function (event, ui) {

            if (east) {
                //decrease one by one --?
                $(this).nextAll().css('width', --? );
            }
        }
    });


});
4

2 に答える 2

0

幅を次のように設定します。

if (east) {
     //decrease one by one
     var newWidth = ($('#resizable1').width() - $(this).outerWidth(true)) / $(this).nextAll().length
     ...
}

編集: 2 番目の兄弟のサイズを変更すると、3 番目と 4 番目の兄弟はどのように反応しますか? 残りのスペースを計算するとき、最初のものだけを考慮しました...残りのスペースを埋める場合は、$(this).outerWidth(true) を取得するだけでなく、前の兄弟からのすべての outerWidths を合計する必要があります。

ところで、上記のコードはテストされていません。残りのスペースを埋めるための提案です。

于 2012-08-08T10:54:14.887 に答える
0

それらすべてが同じ幅変数を共有するようにし、変数を増減してすべての div に同時に影響を与えます。

関数を呼び出してすべての div サイズを手動で設定し、すべての呼び出しのパラメーターとして同じ変数を使用するかのいずれかです。

または、div で css クラスを共有し、その css クラスを共有するすべての html 要素でサイズ変更関数を呼び出します。

編集：

ああ、私はあなたを完全に理解していません...すべてのdivのサイズを相対的かつフローティングにして、親を埋める必要があります。

于 2012-08-08T10:41:37.583 に答える