2

HTML ページに 2 つの列があります。

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

それぞれがページの半分を占めています

#content {
    height: 100%;
}

#left, #right {
    float: left;
    width: 50%;
    height: 100%; 
    overflow: auto;
}

左半分と右半分の境界をユーザーが調整できるようにしたいと思います。つまり、ユーザーはページをブラウズしながら、境界を左または右に移動できます。どういうわけかそれを行うことは可能ですか？

4

2 に答える 2

4

はい、ただし JavaScript が必要です。それを適用するには、もちろんwidth、各辺の を設定するだけです。

var leftPercent = 50;
function updateDivision() {
    document.getElementById('left').style.width = leftPercent + '%';
    document.getElementById('right').style.width = (100 - leftPercent) + '%';
}

これで、たとえば で分割を調整できますleftPercent = 50; updateDivision()が、ユーザーはそれを行うつもりはありません。これをユーザーに提示するには、さまざまな方法があります。おそらく最も適した方法は、ドラッグできる真ん中の小さな線でしょう. このために、ポジショニングに小さな CSS を使用できます。

#content {
    position: relative;
}
#divider {
    position: absolute;
    /* left to be set by JavaScript */
    width: 1px;
    top: 0;
    bottom: 0;
    background: black;
    cursor: col-resize;
    /* feel free to customize this, of course */
}

そしてdiv、idofと updateを使用dividerしてofも更新していることを確認します。contentupdateDivisionleftdivider

document.getElementById('left').style.left = leftPercent + '%';

次に、ドラッグを処理するためのロジックが少し必要です。(ここでは、すべての要素を適切な名前の変数に入れています):

divider.addEventListener('mousedown', function(e) {
    e.preventDefault();
    var lastX = e.pageX;
    document.documentElement.addEventListener('mousemove', moveHandler, true);
    document.documentElement.addEventListener('mouseup', upHandler, true);
    function moveHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        var deltaX = e.pageX - lastX;
        lastX = e.pageX;
        leftPercent += deltaX / parseFloat(document.defaultView.getComputedStyle(content).width) * 100;
        updateDivision();
    }
    function upHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        document.documentElement.removeEventListener('mousemove', moveHandler, true);
        document.documentElement.removeEventListener('mouseup', upHandler, true);
    }
}, false);

それを読んでどのように機能するかを確認できるはずですが、要するに、誰かが仕切りを押したときにリッスンします。その場合、マウスを動かしたときにリスナーがページにアタッチされます。その場合、変数updateDivisionを更新し、スタイルを更新するために呼び出します。最終的に を取得するmouseupと、ページでのリッスンを停止します。

さらなる改善として、ドラッグ中にすべての要素に適切なcursorスタイルを持たせて、ドラッグ中にカーソルが点滅しないようにすることができます。

やってみて。

于 2013-03-16T23:13:00.683 に答える
-2

部門には何もないので、何も起こりません。それは書くようなものです：

<h1></h1>

そしてh1のCSSを変更し、そこに何かがあることを期待しています

于 2013-03-16T23:12:50.417 に答える