2

了解しました。2つのdivが画面の50％を占め、中央にバーがあるので、ドラッグして左を40％、右を60％にしたり、その逆を行ったりする方法はありますか。

私はこのjqueryを実行できることを望んでいます。

4

5 に答える 5

4

完全な答えはありませんが、一見の価値があるかもしれない1つのことは、jQueryのUIからのサイズ変更可能なインタラクションです：http：//jqueryui.com/demos/resizable/#synchronous-resize

それは、最終製品をどのように機能させるかによって大きく異なります。おそらく、1つのDIVのサイズを変更でき、隣接するDIVがギャップを埋めるように設定できます。

于 2009-09-03T22:13:16.483 に答える
2

ここに私がすぐに書いたメソッドがありますが、これは jQuery を使用しません。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Slider</title>
<style type="text/css">
    #bar1 {
        position: absolute;
        background: red;
        height: 250px;
        width: 400px;
        z-index: 1;
    }

    #bar2 {
        position: absolute;
        background: green;
        height: 250px;
        width: 800px;
    }

    #slider {
        position: relative;
        background: blue;
        height: 100%;
        width: 10px;
        float: right;
    }
</style>

<script type="text/javascript">
    var down = false;
    var mouse_x;
    var interval;
    var IE = document.all?true:false

    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = get_mouse_x;

    function get_mouse_x(e) {
        if (IE)
            mouse_x = event.clientX;
        else
            mouse_x = e.pageX;
    }

    function drag() {
        interval = setInterval("update()", 1);
    }

    function release() {
        clearInterval(interval);
    }

    function update() {
        if ((mouse_x - document.getElementById('bar1').offsetLeft) >= document.getElementById('bar2').offsetWidth) {
            release();
            document.getElementById('bar1').style.width = document.getElementById('bar2').offsetWidth + "px";
        } else if (mouse_x <= document.getElementById('bar1').offsetLeft) {
            release();
            document.getElementById('bar1').style.width = document.getElementById('bar1').offsetLeft + "px";
        } else {
            document.getElementById('bar1').style.width = (mouse_x - document.getElementById('bar1').offsetLeft) + "px";
    }
    }
</script>
</head>

<body onmouseup="javascript:release();">
    <div id="bar1">
        <div id="slider" onmousedown="javascript:drag();"> </div>
    </div>

    <div id="bar2"></div>
</body>
</html>

ウェブサイトでそれを使用することはお勧めしません。代わりに、それから学ぶか、完全に安定するように改善してください。しかし、うまくいけば、この問題に取り組む方法についてのアイデアが得られます.

また、IE にはバグがあり、スライドした後、スライダー div からフォーカスが失われません。これは、スライドし直すと、正しくリリースされないことを意味します。これを回避するには、最初にスライドした後、別の何かに焦点を合わせてから、もう一度スライドします。それ以外は正常に動作します。

うまくいけば、これは何らかの形で役に立ちました:)

于 2009-09-03T23:40:58.830 に答える
1

あなたが説明しているものは、一般にスプリッターと呼ばれます。demoから判断すると、このjQuery プラグインはまさにあなたが望むことをしているように見えます。

于 2009-09-03T22:33:37.493 に答える
0

CSS パーセンテージを実行する代わりに、ウィンドウの幅を見つけて半分に分割し (マイナス バーの幅)、ピクセル幅を設定します。これにより、バーが移動したときに簡単に変更できます。

于 2009-09-03T22:26:10.243 に答える
-1

アプリケーション UI のニーズによっては、これはやり過ぎかもしれませんが、ExtJS はこの種のことを非常にうまく実行します。

言及すべきもう 1 つの型にはまらないオプション、フレームセットです。フレームは 90 年代半ばの寵児でしたが、大騒ぎすることなく、ほぼすべてのブラウザーで今でもサポートされています。

于 2009-09-03T22:24:13.117 に答える