0

このようなページレイアウトを作成しようとしています

しかし、それを達成する方法がわかりません。私が意味したのは; そのページでは、ページに 2 つの領域があり、それらの間のバーを使用して領域のサイズを変更できます。

ありがとう！

4

2 に答える 2

1

はい、もちろん可能です。おそらく、それを行う JQuery または MooTools プラグインがそこにあるでしょう。それ以外の場合は、JQuery を使用した簡単な例を紹介します。この JSFiddleを参照してください。

基本的に、HTML は次のようになります。

<div id="left">Left column!</div>
<div id="verticalresizer">&nbsp;</div>
<div id="right">Right column!</div>​

そして、それらは絶対的に配置されます (簡単にするためにカットされた例からの余分な CSS):

html, body { 
    height: 100%; 
}

#left { 
    width: 200px; /* default starting width */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
#right { 
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 204px; /* width of left col + 4 pixel wide resizer */
}
#verticalresizer { 
    background-color: black; /* so it can be seen */
    width: 4px;
    height: 100%;
    cursor: col-resize;
    position: absolute;
    top: 0;
    left: 200px; /* width of left col */
    bottom: 0;
}

次に、JavaScript。まず説明。ほとんどのコードは、ユーザーが垂直リサイザーをクリックするのをリッスンします。それが起こると、マウスの動きをリッスンします。マウスが移動するたびに、それに応じて列のサイズを変更し、スライダーをマウスの下に保ちます。ユーザーがマウスを離すと (mouseup)、リッスン/サイズ変更を停止します。

var left = 200; // starting left col width
var isClicked = false;
var startX = 200; // starting horizontal position of resizer bar
var isMouseDown = false;

// attach listeners to the document itself
$(document).mousedown(function() {
    isMouseDown = true;
}).mouseup(function() {
    isMouseDown = false;
}).mousemove( function(event) {
    if (isClicked && isMouseDown) {
        var newX = event.pageX;

        if (startX != newX) {
            left += (newX - startX);
            if (left < 0) {
                left = 0; // keep from moving the slider beyond the left edge of the screen
                newX = 0;
            }
            setWidthOfLeftColumn( left );
            startX = newX;
        }
    }
});

// attach click listeners to the resizer slider
$("#verticalresizer").mousedown( function(event) {
    isClicked = true;
    startX = event.pageX;
}).mouseup( function (event) {
    isClicked = false;  
});

// function to resize everything
function setWidthOfLeftColumn( value ) {
    $("#left").css("width", "" + left + "px");
     $("#right").css("left", "" + (left + 4) + "px");
     $("#verticalresizer").css("left", "" + left + "px");
 }
于 2012-08-29T05:35:19.960 に答える
0

HTML フレームセット タグを使用してみてください。

http://www.w3schools.com/tags/tag_frameset.asp

于 2012-08-29T05:31:19.423 に答える