0

次の要件を満たすことができるjQueryプラグインを知っている人はいますか?

画面上に 1 つの DIV とボタンがあります。ボタンをクリックすると、DIV が 2 つに分割されます (これらを A と B と呼びます)。ボタンをもう一度クリックすると、親 DIV が 3 つに分割されます (これで、A、B、C ができました)。

ここまでは順調ですが…

ボタンをもう一度クリックすると A が 2 つに分割され、もう一度ボタンをクリックすると B が 2 つに分割され、もう一度ボタンをクリックすると C が 2 つに分割されます。

ご覧のとおり、ボタンを 3 回クリックすると、マスター DIV が 1/3 に分割されます。

ボタンを 4 回クリックすると、2 つの 1/3 サイズの DIV と 2 つの 1/6 サイズの DIV を含むマスター DIV が作成されます。

似たようなものをどこかで見たことがあると思いますが、これがどこにあったかは一生思い出せません。

誰かがヒントを持っているか、同様のプラグインを知っていれば、本当に感謝しています.

4

1 に答える 1

1

プロトタイプをコーディングさせてください。

<div class="wrap">
    <a class="large button blue" id="split">Split!</a>
    <hr>
    <div class="inner">
        Test
    </div> 
</div>

$('#split').click(function() {

    width = parseInt($('.wrap').css('width'))-20;
    $('.wrap').append($('.wrap  .inner').first().clone());
    nDivs = $('.wrap .inner').size();
    $('.wrap  .inner').css('width', width/nDivs);

});

マージンなどを試して調整できます：http://jsfiddle.net/mKuVm/4/

于 2012-10-25T08:42:33.953 に答える