jquery - 2 つの div を更新する div ハンドラー/リサイザーを実装するには?

Question

jsfiddle (下のスクリーンショット) で見られるように、ハンドラー/サイズ変更を作成する方法を探しています。私のアプリには、それぞれ高さが 50% の 2 つの div があり、ユーザーが jsfiddle のように div のサイズを変更できるようにする方法を見つけたいと考えています。JavaScript や jQuery でこれを行う最もクリーンな方法は何ですか。ありがとう

Answer 1

純粋に CSS3 を使用すると、次のresizeプロパティを使用してこれを実現できます。

http://www.css3.info/preview/resize/

CSS:

div
{
    resize: both;
}

欠点は、すべてのブラウザーでサポートされているわけではないことです。

http://caniuse.com/css-resize

Answer 2

jQueryUI を使用できますrezizeable。http://jqueryui.com/resizable/

1 つの div でサイズ変更可能に設定し、alsoRezizeオプションを使用して他の div を接続します

Answer 3

これを「UI レイアウト」と呼びます。検索すると、このような例が見つかります。

<script type="text/javascript">
$(function () {
    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
    $('#layout').w2layout({
        name: 'layout',
        padding: 4,
        panels: [
            { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
            { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
            { type: 'main', style: pstyle, content: 'main' },
            { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
        ]
    });
});
</script>