如何不使用FrameSet ,而达到使用FrameSet 的效果， 主要是分栏和拖过鼠标改变各栏的大小？

如何模拟,有具体例子么? 

解决方案 »

  1.   

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <script language="javascript">
                <!--
                var oSplitter, oTdSplitter, oTdTop, oTdBottom, oTable;
                var posTdSplitter, posTable;
                var bLoaded = false;
                var bStart = false;
                var iPadding = 0;
                function Position(x, y){
                    this.x = x;
                    this.y = y;
                }
                
                function GetPosition(obj){
                    var objThis = obj;
                    var oBody = document.body;
                    var oLeft = oTop = 0;
                    while (objThis != oBody) {
                        oLeft += objThis.offsetLeft;
                        oTop += objThis.offsetTop;
                        objThis = objThis.offsetParent;
                    }
                    return new Position(oLeft, oTop);
                }
                
                function fnInit(){
                
                    oSplitter = document.getElementById("splitter");
                    oTdSplitter = document.getElementById("tdSplitter");
                    oTdTop = document.getElementById("tdTop");
                    oTdBottom = document.getElementById("tdBottom");
                    oTable = document.getElementById("table");
                    posTable = GetPosition(oTable);
                    oSplitter.style.height = oTdSplitter.offsetHeight;
                    oSplitter.style.width = oTdSplitter.offsetWidth;
                    bLoaded = true;
                }
                
                function fnMouseDown(event){
                
                    if (bLoaded == false) {
                        alert("页面加载未完成，请稍候！");
                        return;
                    }
                    
                    posTdSplitter = GetPosition(oTdSplitter);
                    iPadding = posTdSplitter.y - event.clientY;
                    
                    oSplitter.style.left = posTdSplitter.x;
                    oSplitter.style.top = posTdSplitter.y;
                    oSplitter.style.display = "block";
                    
                    if (oSplitter.setCapture) 
                        oSplitter.setCapture();
                    bStart = true;
                }
                
                function fnMouseUp(event){
                    if (bStart == true) {
                        oSplitter.style.display = "none";
                        if (event.clientY > posTable.y && event.clientY < posTable.y + oTable.offsetHeight - oTdSplitter.offsetHeight) {
                            oTdTop.style.height = event.clientY - posTable.y;
                        }
                        if (oSplitter.releaseCapture) 
                            oSplitter.releaseCapture();
                        bStart = false;
                    }
                }
                
                function fnMouseMove(event){
                    if (bStart == true) {
                        oSplitter.style.top = event.clientY + iPadding;
                    }
                }
                
                //-->  
            </script>
        </HEAD>
        <body onload="fnInit();" onmouseup="fnMouseUp(event);" onmousemove="fnMouseMove(event);" style="margin:0px;" onselectstart="return false;">
            <div style="position: absolute;width:400px;height:2px;background-color: black;z-index:9999;display:none;cursor: row-resize;" id="splitter">
            </div>
            <table cellspacing="0" cellpadding="0" border="1" style="height:100%; width:100%;" id="table">
                <tr>
                    <td id="tdTop" height="100px">
                        topcontent 
                    </td>
                </tr>
                <tr>
                    <td style="width: 100%; height:1px; overflow:hidden;cursor: row-resize;border-top:1px solid black;border-bottom:1px solid black;" id="tdSplitter" onmousedown="fnMouseDown(event);">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td id="tdBottom">
                        bottomcontent 
                    </td>
                </tr>
            </table>
        </body>
    </HTML>